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 @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>

推薦閱讀