php手把手教你做网站(十六)vue，layui列表全选，删除信息

所有的开发都是在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());
     },
  }
})

1. 声明空数组，遍历获取ID，push进数组；
2. 数组转成字符串，通过axios传递到后台删除对应文章，重新读取当前页数据；
3. 如果使用layui，要重新渲染form；
4. 文章建表的时候可以创建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>

1. 满足cdlist==1的时候，额外添加了class='selected'高亮显示，和jquery的addclass效果一样；
2. 回到了原始的写法，方法写到了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;
        }
	  },