1. 首頁 > 生活百科 > >

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理( 二 )

生活百科


【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖
3.2v-for 循環數組 ， 循環字符串，數字 ， 對象<!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 v-for="(people,i) in people">第{{i}}個女孩是：{{people}}</p><h1>循環數字</h1><ul><li v-for="(i,a) in num">{{i}}----索引值：{{a}}</li></ul><h1>循環字符串</h1><ul><li v-for="(i,a) in str">{{i}}----索引值：{{a}}</li></ul><h1>循環對象</h1><!--<div v-for="value in obj">--><!--key 在后，value在前--><div v-for="(value,key) in obj">key值為：{{key}},value值為：{{value}}</div></div></body><script>var mv = new Vue({el: '#app',data:{people:['張三','李四','王五','趙六'],num:4, // 循環數字，從1開始，到4結束str: '歡迎 come on!!', // 循環字符串循環的是字符obj:{name:'zzz', age:18,hobby:['籃球','足球']},}})</script></html>
【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖
3.3 總結v-for 可以循環數組，數字 ， 字符串，對象v-for="key in obj"如果是數組：key就是數組的一個個元素如果是數字：key就是從1開始的一個個數字如果是字符串：key就是一個個字符如果是對象：key就是一個個value的值v-for="(key,value) in obj"如果是數組：key就是數組的一個個元素，value就是索引如果是數字：key就是從1開始的一個個數字，value就是索引如果是字符串：key就是一個個字符，value就是索引如果是對象：key就是一個個value的值，value就是一個個key每次循環的標簽上 ， 一般都會帶一個屬性：：key='值必須唯一'key值得解釋：為了加速虛擬dom的替換4 數組更新與檢測4.1 可以檢測到變動的數組操作push: 最后位置添加pop: 最后位置刪除shift: 第一個位置刪除unshift：第一個位置添加splice: 切片sort: 排序reverse: 反轉4.2 檢測不到變動的數組操作：filter(): 過濾concat(): 追加另加一個數組slice():map():原因：作者重寫老劉相關方法（只重寫了一部分方法，但是還有另一部分沒有重寫）4.3 案例<!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><button @click="handleClick">點我加人</button>|<button @click="handleClick1">點我追加一批女生</button>|<button @click="handleClick2">點我修改數組頁面變化</button><p v-for="people in peoples">{{people}}</p><h1>對象的檢測與更新</h1><button @click="handleClick3">點我追加身高</button>|<button @click="handleClick4">點我追加身高--解決</button>|<p v-for="(value,key) in obj">{{key}}---{{value}}</p></div></body><script>var vm = new Vue({el: '#app',data:{peoples:['張三','李四','王五','趙六'],obj:{'name':'zhy',age:10}},methods:{handleClick(){this.peoples.push('技術1號')},handleClick1(){var a = this.peoples.concat(['技術2號','技術3號','技術4號'])// 監控不到變化console.log(a)},handleClick2(){Vue.set(this.peoples,0,'zzz')},handleClick3(){this.obj.height = '100'// 監控不到變化console.log(this.obj)},handleClick4(){Vue.set(this.obj,'height',180) // 監控到變化}}})</script></html>
【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖
5. 雙向數據綁定5.1 理解iinput標簽，v-model:數據雙向綁定使用 屬性指令綁定:value = 'https://www.huyubaike.com/biancheng/變量' 是數據的單向綁定v-model="name" :數據雙向綁定5.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>數據單向綁定</h1><p>用戶名：<input type="text" v-model="name"></p><p>密碼：<input type="password" v-model="password" ></p><button @click="handleSubmit">提交</button>{{err}}</div></body><script>var vm = new Vue({el: '#app',data: {name: '',password: '',err: ''},methods: {handleSubmit() {console.log(this.name, this.password)this.err = '用戶名密碼錯誤'}}})</script></html>

推薦閱讀