浙江龙网

  1. 首页 > 生活百科 > >

【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理( 三 )

生活百科


【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
6. 事件处理6.1 事件事件释义input当输入框进行输入的时候 触发的事件change当元素的值发生改变时 触发的事件blur当输入框失去焦点的时候 触发的事件事件绑定v-on:事件名='函数'--->@事件名='函数'change 和 blur 最本质的区别如果输入框为空，失去焦点后 ， change不会触发，但是blur会触发6.2 案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script></head><body><div id="app"><h1>input的事件处理</h1><h2>blur</h2><p><input type="text" v-model="name1" @blur="handleBlur"> ---> {{name1}}</p><h2>change</h2><p><input type="text" v-model="name2" @change="handleChange"> ---> {{name2}}</p><h2>input</h2><p><input type="text" v-model="name3" @input="handleInput"> ---> {{name3}}</p></div></body><script>var vm = new Vue({el:'#app',data:{name1:'',name2:'',name3:'',},methods:{handleBlur(){console.log('失去焦点了 ， 触发了',this.name1)},handleChange(){console.log('发生变化，触发了',this.name2)},handleInput(){console.log('输入了内容，触发了',this.name3)}}})</script></html>【【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理】
【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
6.3 过滤案例// // 1 补充：数组过滤方法，内置的// var l = ['a','at','atom','be','beyond','cs','csrf','d','ddd']// // filter数组内置的，需要传一个匿名函数，接受一参数，会循环的从数组中取出值，传入匿名函数，执行// // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃// l = l.filter(function (item){//console.log('进来一个值：',item)//return false// })// console.log(l)// 2 判断字符串是否在字符串中// var s='zbbass'// var a='a'// console.log(s.indexOf(a)>=0)// 3 es6 模板字符串对象写法 剪头函数// var f=function (){//console.log('打印了')// }// 3.1不带参数的箭头函数// var f = () => {//console.log('打印了')// }// 3.2 带一个参数，没有返回值得剪头函数// var f = name=>{//console.log('打印了',name)// }// 3.3 多个参数 ， 没有返回值// var f = (name,age) =>{//console.log('打印了',name,age)// }// 3.4 带一个参数，有返回值 ， 函数体只有一行// var f = function (name){//return name+'nb'// }// var f = name=>name+'nb' // 有什么用？ 1 简洁2 箭头函数没有自己的this,会用上一层的this// var obj = {//f:function (){//console.log('匿名函数的this',this)//},//f1:()=>{//console.log('箭头函数的this',this)//}// }// obj.f()// obj.f1()
【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script></head><body><div id="app"><h1>过滤案例</h1><p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p><ul><li v-for="item in newdataList">{{item}}</li></ul></div></body><script>var vm = new Vue({el: '#app',data: {search: '',dataList: ['a','at','atom','be','beyond','cs','csrf','d','dddd',],newdataList: ['a','at','atom','be','beyond','cs','csrf','d','dddd',],},methods: {handleSearch() {console.log('搜索的内容是：', this.search)// 复杂写法// this.dataList=this.dataList.filter(item=>{//console.log(this)//// 判断this.search是否在item中 ， 如果在保留，return true,如果不在返回false//if (item.indexOf(this.search)>=0){//return true//}else {//return false//}// })// 简单写法this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)}}})</script></html>
【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

文章插图
6.4 事件修饰符.stop只处理自己的事件，不向父控件冒泡.self只处理自己的事件，子控件冒泡的事件不处理.prevent阻止a链接的跳转.once事件只会触发一次（适用于抽奖页面）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script></head><body><div id="app"><h1>事件修饰符</h1><h2>事件冒泡--通过 事件修饰符 stop，加在子控件上，阻止事件冒泡</h2><ul @click="handleUl"><li @click.stop="handleMn">美女</li><li @click="handleSg">帅哥</li></ul><h2>事件冒泡--通过 事件修饰符 self加在父控件上 ， 只处理自己的事件</h2><ul @click.self="handleUl"><li @click="handleMn">美女</li><li @click="handleSg">帅哥</li></ul><h3>阻止a标签跳转</h3><a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a><h4>once只执行一次</h4><button @click.once="handleOnce">点我秒杀</button></div></body><script>var vm = new Vue({el: '#app',data: {},methods: {handleUl() {console.log('ul被点了')},handleMn() {console.log('美女被点了')},handleSg() {console.log('帅哥被点了')},handleA() {console.log('a被点了')},handleOnce() {console.log('恭喜你，秒到了')}}})</script></html>

推荐阅读


上一篇：HDFS追加数据报错解决办法

下一篇：即兴小探华为开源行业领先大数据虚拟化引擎openLooKeng