老师，检查一下
来源：3-12 自由编程
未来it界的一枚程序媛
2020-06-18 16:22:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 样式的绑定</title>
<script type="text/javascript" src="../vue.js"></script>
<style type="text/css">
.activating{
background-color: purple;
border: none;
font-size: 20px;
color: #fff;
}
.activated{
background-color: pink;
border: 2px solid yellow;
font-size: 30px;
color: black;
}
</style>
</head>
<body>
<!-- 方法一 -->
<!-- <button id="btn" :class=[activating,activated] @click="handelClick">按钮</button> -->
<!-- 方法二 -->
<button id="btn" :class={activating:isActivating,activated:isActivated} @click="handelClick">按钮</button>
<script>
var vm=new Vue({
el:'#btn',
data:{
// 方法一
// activating:"activating",
// activated:''
// 方法二
activating:'activating',
activated:'',
isActivating:true,
isActivated:false
},
methods:{
// 方法一
// handelClick:function () {
// this.activating=this.activating==='activating' ? 'activated' :'activating';
// }
// 方法二
handelClick:function(){
if (this.isActivating) {
this.isActivating=false;
this.isActivated=true;
}else{
this.isActivating=true;
this.isActivated=false;
}
}
}
})
</script>
</body>
</html>
有个问题：为啥要在data里面还要定义activated=‘’呢，如果没有，则会说activated未定义，还有如果有：sytle数组怎么实现呢？我试了一下，他只能显示改变后的，之前设置的被改变的覆盖了
3回答
-
同学你好，老师这边直接把代码中的activated：“”去掉没有报错。同学是说被注释掉的那个方法为啥去掉会报错吗？
这是因为上面使用到了activated，它和activating一样，就类似于一个变量，没有定义直接使用肯定会报错哦。
是不是同学觉得第二种方法里面，activated没有定义就产生了疑惑。在对象的这种形式里面，冒号前面的是属性名，属性是直接在对象中定义即可。而属性的值，如果是一个变量，则需要定义这个变量才行。
如果还不理解，可以对比如下，在对象中，属性a直接在对象中定义，而属性值，如果是一个变量，则需要定义否则会报错"b没有定义”
数组中，如果元素是一个变量，也需要定义。这就是数组的形式，activated没有在data中定义就报错的原因了：
style数组的形式，比较麻烦。不推荐这种方式，非常冗余。实际开发中也不会这样去做，建议就这样做就行。
（为了展示数组的形式，把样式分别定义在不同的变量a和b上了）
祝学习愉快~
0 -
未来it界的一枚程序媛
提问者
2020-06-18
我说的是为啥要在data里写activated：“”，不写会说未定义activated，然后怎么用：style数组的形式实习功能
0 -
好帮手慕夭夭
2020-06-18
同学你好，问题解答如下：
1.老师这边注释掉activated，并没有报错，建议同学重新测试一下。
2.同学说的是第一种数组的方式有问题吗？
老师把同学注释的代码解开，测试了一下，没有问题，可以正常切换，也能切换回去。如下：
点击一下
再点击
代码是对的，建议同学重新测试一下哦。祝学习愉快~
0
相似问题