我是在页面中用script标签引入的，
<!--<div class="timeBar" :class="[ {'gray-bg': data.Type==0}, {'blue-bg': data.Type==1}, {'green-bg': data.Type==2}]">-->
<div class="timeBar" :class="timeBarType(data.Type)">
在实例中用来计算属性，但是html结构上的timeBarType要求是一个对象不能是function，上面被注释掉的可以，但是我觉的太繁琐来，
computed: {
极客观点
项目管理
HarmonyOS
timeBarType: function (type) {
if(type == 0) return 'gray-bg';
if(type == 1) return 'blue-bg';
if(type == 2) return 'green-bg';
}
},初始化一个值
data(){
return{
type:0
}
}
返回数据时，
this.type=data.type
还是在计算属性中
computed: {
timeBarType: function () {
if(this.type == 0) return 'gray-bg';
if(this.type == 1) return 'blue-bg';
if(this.type== 2) return 'green-bg';
}},
<div class="timeBar" :class="timeBarType">
可以用watch呀
<html>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<div id="app">
<div class="timeBar" :class="timeBarClassObj">xxx</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
t: 0,
timeBarClassObj: {
red: true,
blue: false
}
},
watch: {
t(nv) {
this.timeBarClassObj = {
red: nv === 0,
blue: nv === 1
}
}
},
})
</script>
</html>9 回答1.7k 阅读✓ 已解决
6 回答1.5k 阅读
3 回答1.4k 阅读✓ 已解决
4 回答1.2k 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
3 回答1k 阅读
3 回答1.3k 阅读✓ 已解决
timeBarType写在methods中，根据传入的参数返回classname