当计算值更新时，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添加类

回答

相关问题