所有的开发都是在iis下进行的,没有搭建vue的开发环境,只是加载了vue.js
1、列表全选,取消全选
1)html代码
<div id='app'>
<li v-for="item in itemlist">
<input type="checkbox" v-model="item.isChecked" @click='singcheck'>
全选{{item.isChecked}}
</li>
<input type="checkbox" name="" id="allId" v-model="allData.isCheck" @click='allcheck'>
<label for="allId">{{allData.text}}</label>{{allData.isCheck}} <br/>
<button @click='delcheck'>删除</button>
</div>
全选checkbox 加上点击事件@click,绑定allData中的isCheck,点击的时候触发click事件forEach遍历itemlist,赋值isChecked;
单选按钮触发singcheck只改变自身的isChecked;
删除的时候触发delcheck再次遍历,获取itemlist中isChecked为true中的id,加入数组作为参数传递给后台;
2)js代码
var app = new Vue({
el: '#app',
data: {
allData: {
isCheck: false
},
itemlist: [
{
id: '1',
news_name: '怎样才能做出一款好的茶叶包装盒设计?',
isChecked: 0
},
{
id: '2',
news_name: '精诚注塑磨具宣传册设计制作欣赏',
isChecked: 0
},
{
id: '3',
news_name: '药品分类产品',
isChecked: 0
}]
},
methods: {
allcheck:function(){
this.itemlist.forEach((e)=>{
e.isChecked=this.allData.isCheck;
});
},
singcheck:function(e) {
e.isCheck=1;
},
delcheck:function() {
let arr=new Array();
this.itemlist.forEach((e)=>{
if(e.isChecked==1){
arr.push(e.id);
};
});
console.log(arr.toString());
},
}
})
- 声明空数组,遍历获取ID,push进数组;
- 数组转成字符串,通过axios传递到后台删除对应文章,重新读取当前页数据;
- 如果使用layui,要重新渲染form;
- 文章建表的时候可以创建isCheck字段默认为0,这样读取数据的时候直接读出来就可以了,不必再次循环插入isCheck;
let arr=new Array();
arr.push(e.id);
提示foreach is not a function,注意foreach 应该是forEach,是区分大小写的。
2、vue.js菜单切换
使用v-show显示,例如:v-show=”cdlist==2″ 条件成立,则显示。
1)html代码
<li ><a @click="cdmenth(1)" :class="{'selected':cdlist==1}">菜单1</a></li>
<li><a @click="cdmenth(2)" :class="{'selected':cdlist==2}">菜单2</a></li>
- 满足cdlist==1的时候,额外添加了class=’selected’高亮显示,和jquery的addclass效果一样;
- 回到了原始的写法,方法写到了div,只不过原始的是onclick,jquery的是click,vue的是@click;
满足cdlist==1的时候,额外添加了class='selected'高亮显示,和jquery的addclass效果一样;
js代码
new Vue({
el: '#app',
data(){
return {
cdlist:1
}
},
methods:{
cdmenth:function(c){
this.cdlist=c;
}
},