vue--创建对象属性
如果我们遇到以下情况当我们在页面中想完成一个动态效果,例如通过鼠标点击控制class的隐藏或者显示,然而我们的代码或者引用的数据中没有这个属性,这个时候我们可以通过vue中的set方法创建属性,并且为其赋值。2.例如以下代码以下并不是完整代码,由于完整代码有点多,所以仅截取相关代码HTML+Vue<div class="cart-item-check"><!--我们没有在标签中创建名
·
- 如果我们遇到以下情况
当我们在页面中想完成一个动态效果,例如通过鼠标点击控制class的隐藏或者显示,然而我们的代码或者引用的数据中没有这个属性,这个时候我们可以通过vue中的set方法创建属性,并且为其赋值。
2.例如以下代码
以下并不是完整代码,由于完整代码有点多,所以仅截取相关代码
HTML+Vue
<div class="cart-item-check">
<!--我们没有在标签中创建名为check的class-->
<!--在json数据中我们也没有创建check属性-->
<!--但是我们在v-bind方法中绑定了check-->
<a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectProduct(item)">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</a>
</div>
json数据
{
"status":1,
"result":{
"totalMoney":109,
"list":[
{
"productId":"600100002115",
"productName":"黄鹤楼香烟",
"productPrice":19,
"productQuantity":1,
"productImage":"static/img/goods-1.jpg",
"parts":[
{
"partsId":"10001",
"partsName":"打火机",
"imgSrc":"static/img/part-1.jpg"
},
{
"partsId":"10002",
"partsName":"打火机",
"imgSrc":"static/img/part-1.jpg"
}
]
},
"message":""
}
js
methods: {
//创建selectProduct函数给onclick事件引用
selectProduct:function (item) {
//如果check class的checked是否存在
if(typeof item.checked=='undefined'){
//全局创建
Vue.set(item,'checked',true);
//局部创建
// this.$set(item,'checked','true');
} else{
item.checked=!item.checked;
}
}
3.总结
现用v-bind绑定自己想要的class名称
在js中用Vue.set 或者this.$set创建class
更多推荐
已为社区贡献4条内容
所有评论(0)