vue2.0中click事件 + 点击当前元素(如li)实现动态切换class
vue 2017-10-20 11:30:47

1、点击当前元素(如li)实现动态切换class，只有当前元素添加active，其他兄弟元素均隐藏

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div>  
  3.         <ul>  
  4.             <!-- 渲染的数组中active这个字段 可以没有 -->  
  5.             <li v-for="(item, index) in pageList" class="page-infinite-listitem" @click="playMp3($event,item,index)" :class="{ 'active' : item.active}">  
  6.                 <div class="text">  
  7.                     <i class="icon iconfont"></i> {{item.title}}  
  8.                 </div>  
  9.   
  10.             </li>  
  11.         </ul>  
  12.     </div>  
  13. </template>  
  14.   
  15. <script>  
  16.     import Vue from 'vue'  
  17.   
  18.     export default {　　　　  
  19.         data() {  
  20.             return {  
  21.                 active: false,  
  22.                 pageList: [{  
  23.                     title: '第一行'  
  24.                 }, {  
  25.                     title: '第二行'  
  26.                 }, {  
  27.                     title: '第三行'  
  28.                 }, {  
  29.                     title: '第四行'  
  30.                 }]  
  31.             }  
  32.         },  
  33.         methods: {  
  34.             playMp3(event, item, index) {  
  35.                 // 列表的数据先将所有的class遍历一遍设为false，再设置指定的子元素的字段active的class为显示active  
  36.                 this.$nextTick(function() {  
  37.                     this.pageList.forEach(function(item) {  
  38.                         Vue.set(item, 'active', false);  
  39.                     });  
  40.                     Vue.set(item, 'active', true);  
  41.                 });  
  42.             }  
  43.         }  
  44.     }  
  45. </script>  

 

2、点击添加class,点击删除class 

Vue.set 也可以写成：this.$set，就可以不用再引入一遍Vue了

 

XML/HTML Code复制内容到剪贴板
  1. <!--      
  2.     要求：点击添加class 再点击去掉class  并获取点击的值      
  3.     :value  绑定值      
  4.     :class  添加class运算式      
  5.     click 点击事件添加value并且高亮      
  6.           
  7.     tag.isA 并不是数组中自带的，要用vue的set方法给写入进去      
  8. -->  
  9. <div class="box_shadow classify_details_item">  
  10.     <span v-for="(tag, index) in tagList" :value="tag.tagName" :class="{'classify_item active':tag.isA,'classify_item':!tag.isA}" v-on:click="addTag($event,tag,index)">{{tag.tagName}}</span>  
  11. </div>  
  12.   
  13. <script>  
  14.     import Vue from 'vue'  
  15.     export default {  
  16.         name: 'publishBase',  
  17.         data: function() {  
  18.             return {  
  19.                 value: []  
  20.             }  
  21.         },  
  22.         methods: {  
  23.             addTag(event, tag, index) {  
  24.                 let isA = this.tagList[index].isA;  
  25.                 let that = this;  
  26.   
  27.                 if(!isA) {  
  28.                     // 在选中的时候要判断  
  29.                     if((this.value.length + 1) > 3) {  
  30.                         that.$toast({  
  31.                             message: "最多只能选择三个！",  
  32.                             position: "top",  
  33.                             className: "toast-z"  
  34.                         });  
  35.                         return false;  
  36.                     }  
  37.                 }  
  38.   
  39.                 this.value = [];  
  40.                 Vue.set(this.tagList[index], 'isA', !isA);  
  41.                 this.tagList.forEach(function(item) {  
  42.                     if(item.isA) {  
  43.                         that.value.push(item.tagName);  
  44.                     }  
  45.                 });  
  46.   
  47.             },  
  48.         },  
  49.         watch: {  
  50.             value() {  
  51.                 console.log(this.value);  
  52.                 //设置监听      
  53.                 this.$emit('chooseTags', this.value);  
  54.             },  
  55.         }  
  56.     }  
  57. </script>  

 

点击checkbox框指定数值，其余的灰色：

 

 

1.jpg

 

下一步，任意选择一个checkbox，其余灰色：

 

2.jpg

 

将选中的取消，其他也恢复：

1.jpg

XML/HTML Code复制内容到剪贴板
  1. <div class="class-item clear" v-for="(item,index) in classList">      
  2.     <input type="checkbox" v-model="selectedBox" :value="item.lessonId" :disabled="item.active">      
  3. </div>     

 

 

JavaScript Code复制内容到剪贴板
  1. <script>    
  2.     export default {    
  3.         name: 'classLibrary',    
  4.         data: function() {    
  5.             return {    
  6.                 selectedBox: [], //监听用户选择的checkbox    
  7.                 classList: [], //数组，可以在init中对其赋值    
  8.             }    
  9.         },    
  10.         watch: {    
  11.     
  12.             selectedBox() {    
  13.                 let vm = this;    
  14.                 let list = vm.classList;    
  15.                 let selected = vm.selectedBox;    
  16.                 let selectedLen = selected.length;    
  17.                 let userSelected = []; //用户选择的开始重组数组    
  18.                     
  19.                 if(selectedLen >= 1) { //大于1就开始灰色    
  20.                     list.forEach(function(item, index) {    
  21.                         if(selected.indexOf(item.lessonId) !== -1) {    
  22.                             // 如果不存在    
  23.                             vm.$set(list[index], 'active', false);    
  24.                             userSelected.push(item);    
  25.                                 
  26.                         } else {    
  27.                             vm.$set(list[index], 'active', true);    
  28.                             vm.removeByValue(userSelected,item.lessonId);     
  29.                         }    
  30.                     });    
  31.                 } else {    
  32.                     list.forEach(function(item, index) {    
  33.                         vm.$set(list[index], 'active', false);    
  34.                     });    
  35.                 }    
  36.                     
  37.             },    
  38.     
  39.         }    
  40.     }    
  41. </script>    

 

 

JavaScript Code复制内容到剪贴板
  1. removeByValue(arr, val) {    
  2.                 // 查询value中是否有这个值，如果有就去除这个数组    
  3.                 for(var i = 0; i < arr.length; i++) {    
  4.                     if(arr[i].value == val) {    
  5.                         arr.splice(i, 1);    
  6.                         break;    
  7.                     }    
  8.                 }    
  9.            },  

 

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

JavaScript Code复制内容到剪贴板
  1. <!-- 阻止单击事件冒泡 -->  
  2. <a v-on:click.stop="doThis"></a>  
  3. <!-- 提交事件不再重载页面 -->  
  4. <form v-on:submit.prevent="onSubmit"></form>  
  5. <!-- 修饰符可以串联  -->  
  6. <a v-on:click.stop.prevent="doThat"></a>  
  7. <!-- 只有修饰符 -->  
  8. <form v-on:submit.prevent></form>  
  9. <!-- 添加事件侦听器时使用事件捕获模式 -->  
  10. <div v-on:click.capture="doThis">...</div>  
  11. <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->  
  12. <div v-on:click.self="doThat">...</div>  
  13.   
  14. <!-- click 事件只能点击一次，2.1.4版本新增 -->  
  15. <a v-on:click.once="doThis"></a>  

 

 

本文来自于：http://www.yoyo88.cn/study/vue/179.html

上一篇 vue-touch
下一篇 HBuilder支持es6
相关的文章
Powered by yoyo苏ICP备15045725号