浙江龙网

  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>

推荐阅读


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

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