vue 条件渲染与列表渲染 清疚 2024-04-18 23:53 14阅读 0赞 ### 文章目录 ### * vue 渲染 * * 条件渲染 * * v-if 与 v-else渲染 以及 v-show * 列表渲染 * * 遍历对象 * vue 数组以及对象更新元素 * * Vue 可以检测的变化 * Vue 无法检测到的变化 # vue 渲染 # ## 条件渲染 ## ### v-if 与 v-else渲染 以及 v-show ### v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载,多余if不会存在内存中。 > v-if和v-else直接控制 DOM 是否被渲染,而v-show则是通过控制 css 的方式来控制 DOM 是否展示。 > 在v-if中,如果一开始条件为假,则 Vue 什么也不会做,当条件变为真的时候,Vue 才会去渲染这一部分 DOM,当条件再次变为假的时候,与这一块相关的所有内容都会被从 DOM 树中删除掉。 > 而v-show则要简单的多,它仅仅是通过控制 css 中的 display 来控制 DOM 的显示和隐藏。 <div id="app1"> <p v-if="isTrue"> isTrue 是 true 显示 </p> <p v-else> isTrue 是 false 显示 </p> 根据 type 值显示 div内容 <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> <h4> v-show </h4> 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致与v-if一样: 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 <p v-show="ishow"> ishow 是 true 显示 </p> </div> vue代码 //if else show 条件渲染 var a = new Vue({ el:'#app1', data: { //绑定默认css属性 isTrue: false, ishow: true, type:'B' } }); ## 列表渲染 ## 用 v-for 把一个数组对应为一组元素 ### 遍历对象 ### v-for 来遍历一个对象的属性。 > v-for=“item in items” <ul id="example-1"> <li v-for="item in items"> { { item.message }} </li> </ul> 提供第二个的参数为 property 名称 (也就是键名): > (value, name) in object <ul id="example-2"> <li v-for="(item,index) in items"> { {index}} ----- { { item.message }} </li> </ul> 可以用第三个参数作为索引: > (value, name, index) in object 属性值 key 索引 <ul id="example-3"> <li v-for="(value, key, index) in object"> { {index}}---- { {key}} ----- { { value }} </li> </ul> html 代码 <div id="app2"> <ul id="example-1"> <li v-for="item in items"> { { item.message }} </li> </ul> 索引显示 <ul id="example-2"> <li v-for="(item,index) in items"> { {index}} ----- { { item.message }} </li> </ul> 属性值 key 索引 <ul id="example-3"> <li v-for="(value, key, index) in object"> { {index}}---- { {key}} ----- { { value }} </li> </ul> <h5>过滤数组</h5> <ul id="example-4"> <li v-for=" n in evenNumbers"> { { n }} </li> </ul> <h5>v-for 也可以接受整数</h5> <div> <span v-for="n in 10">{ { n }} </span> </div> <h5>你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容</h5> <ul> <template v-for="item in items"> <li>{ { item.message }}</li> <li class="divider" role="presentation"> presentation </li> </template> </ul> </div> vue代码 // for 渲染列表 var a = new Vue({ el:'#app2', data: { items: [ { message: 'Foo1' }, { message: 'Bar2' }, { message: 'Bar3' }, { message: 'Bar4' }, { message: 'Bar5' }, ], object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' }, //排序 numbers: [ 1, 2, 3, 4, 5 ], }, //计算属性 初始化 computed: { // 过滤数组 evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }); } } }); </script> ## vue 数组以及对象更新元素 ## 由于 JavaScript 的限制,Vue 不能检测以下数组的变动: 1 、不能通过用数组下边去对数组元素进行更新 2 、 不能用对象.key 的 去修改对象属性值 ### Vue 可以检测的变化 ### 可以使用Vue 提供的编译方法,用来返回一个新的数组,并且可以被Vue 检测到然后响应式渲染。 现有数据字段的变化:item[0].isShow = true; 用来表示是否显示此条数据 通过Vue.set(object, key, value)的方式添加的属性 通过Vue.delete(object, Key)的方式删除的属性 push() pop() shift() unshift() splice() sort() reverse() filter() concat() slice() ### Vue 无法检测到的变化 ### 利用索引去设置新的数据时:items\[indexOfItem\] = newItem; 直接修改数组的长度时:items.length = newLength; 直接去添加或删除对象的属性:app.dataSource.newKey = ‘newKey’ <div id="app"> <ul> <li v-for="(item, index) in items" v-if="item.isShow" :key="index"> <p>{ {index}}</p> <p>{ {item.name}}</p> <p>¥{ {item.price}}</p> </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: [ { name: 'android', price: '12.00', isShow: false // 用来表示是否显示磁条数据 }, { name: 'js', price: '13.00', isShow: true } ] } }); </script>
还没有评论,来说两句吧...