1、解决vue页面渲染出现花括号的问题:
在最外层的dom节点上加上 v-cloak ,css里面
<div class="detail-content" id="detail-content" v-cloak>
....
</div>
css:
[v-cloak]{
display: none;
}
2、vue复选框 模拟checkbox多选全选
<div class="list">
<div @click="checkAll">.</div>
<div class="checkList" v-for="item in List">
<div>
<span class="check" :class="{'isChecked':Listids.indexOf(item.id)>=0}" @click="checkOne(item.id)"></span>
</div>
</div>
</div>
data:function(){
return{
List:[
{id:1,value:'one'},
{id:2,value:'two'},
{id:3,value:'three'}
],
Listids:[],
isCheckAll:false,
}
},
methods:{
checkOne(id){
var ids = this.Listids.indexOf(id);
if(ids>=0){
//如果包含了该ID,则删除(单选按钮由选中变为非选中状态)
this.Listids.splice(ids,1);
}else{
//选中该按钮
this.Listids.push(id);
}
console.log(this.Listids);
},
checkAll(){
//全选
let that = this;
that.isCheckAll = !that.isCheckAll;
if(that.isCheckAll){
that.Listids=[];
that.List.forEach(function(elm){
that.Listids.push(elm.id)
})
}else{
that.Listids=[];
}
console.log(this.Listids);
}
}