當計算值更新時，Vue.js添加類

我是vue.js的新手，但我有一個簡單的問題。我跟着一個教程，但我想只有一小部分：-P當計算值更新時，Vue.js添加類

每當我的等級發生變化時，我想添加一個css類來爲標籤設置動畫。我該如何做這件小事？

<div id="app"> 
<h1>Current Rank: <strong>{{ rank }}</strong></h1> 
<p>Your XP: <strong>{{ xp }}</strong></p> 
<button @click="increase">+ 10 XP</button> 
<button @click="decrease">- 10 XP</button> 
</div> 

var app = new Vue({ 
    el: "#app", 
    data: { 
    xp: 10 
    }, 
    methods: { 
    increase: function() { 
     return this.xp += 10; 
    }, 
    decrease: function() { 
     return this.xp -= 10; 
    } 
    }, 
computed: { 
    rank: function() { 
     if (this.xp >= 100) { return "Advanced"; } 
    else if (this.xp >= 50) { return "Intermediate"; } 
    else if (this.xp >= 0) { return "Beginner"; } 
    else { return "Banned"; } 
}

} }）;

https://jsfiddle.net/0caprx4L/

來源

2017-07-24 Martin Giuliani

在Vue公司可以通過將其綁定到內部的數據屬性切換類：https：//vuejs.org/v2/guide/class-and-style.html#Object-Syntax – yuriy636

你可以['看']（https://vuejs.org/v2/api/#watch）'rank 「當它發生變化時採取行動。 –

可能有許多方法可以做到這一點，但我認爲最簡單的就是使用Vue.js transitions。

下面是一個工作示例。代碼的最相關的部分是這樣的：

<transition name="highlight" mode="out-in"> 
    <h1 :key="rank">Current Rank: <strong>{{ rank }}</strong></h1> 
</transition>

的:key="rank"部分可以確保h1元素有一個不同的密鑰時，排名的變化。這可以防止Vue.js重複使用相同的元素，而是使舊元素被刪除，並添加新元素。這會觸發我們設置的名稱爲highlight的轉換。（請參閱CSS瞭解動畫的完成方式。）還要注意mode的out-in，它確保在動畫之前發生離開動畫。（沒有這一點，有重疊，其中無論是原來的級別，和新的排名都在同一時間可見。）

var app = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    xp: 10 
 
    }, 
 
    methods: { 
 
    increase: function() { 
 
     return this.xp += 10; 
 
    }, 
 
    decrease: function() { 
 
     return this.xp -= 10; 
 
    } 
 
    }, 
 
    computed: { 
 
    rank: function() { 
 
     if (this.xp >= 100) { 
 
     return "Advanced"; 
 
     } else if (this.xp >= 50) { 
 
     return "Intermediate"; 
 
     } else if (this.xp >= 0) { 
 
     return "Beginner"; 
 
     } else { 
 
     return "Banned"; 
 
     } 
 
    } 
 
    } 
 
});

.highlight-enter-active { 
 
    animation: highlight 2s; 
 
} 
 

 
@keyframes highlight { 
 
    0% { background-color: yellow; } 
 
    100% { background-color: transparent; } 
 
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <transition name="highlight" mode="out-in"> 
 
    <h1 :key="rank">Current Rank: <strong>{{ rank }}</strong></h1> 
 
    </transition> 
 
    <p>Your XP: <strong>{{ xp }}</strong></p> 
 
    <button @click="increase">+ 10 XP</button> 
 
    <button @click="decrease">- 10 XP</button> 
 
</div>

來源

2017-07-24 19:20:28 smarx

當計算值更新時，Vue.js添加類

回答

相關問題