Vue005_ 列表渲染

列表渲染

列表显示指令

数组: v-for / index
对象: v-for / key

2) 列表的更新显示

删除 item
替换 item

3) 列表的高级处理

列表过滤
列表排序

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><h2>测试：v-for 遍历数组</h2><ul><li v-for="(p, index) in persons" :key = "index">{{index}}--{{p.name}}--{{p.age}}--<button @click="deleteItem(index)">删除</button>--<button @click="updateItem(index,{name:'tom',age:15})">更新</button></li></ul><h2>测试： v-for 遍历数组</h2><ul><li v-for="(value, key) in persons[0]">{{ key }} : {{ value }}</li></ul></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {persons:[{id: 1,name: 'George',age: 22},{id: 2,name: 'Honey',age: 20},{id: 3,name: 'GeorgeDage',age: 20}]},methods:{deleteItem(index) {//splice//The elements to add to the array. If you don't specify any elements, //splice simply removes elements from the array. this.persons.splice(index,1)},updateItem(index,p){// this.persons[index] = p  //页面不会更新this.persons.splice(index,1,p)}}})</script></body>
</html>

结果展示

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><input type="text" name="searchName" placeholder="搜索指定用户名" v-model="searchName"/><ul><li v-for="(p, index) in filterPerson" :key='index'>{{index}}--{{p.name}}--{{p.age}}</li></ul><button @click="setOrderType(1)">年龄升序</button><button @click="setOrderType(2)">年龄降序</button><button @click="setOrderType(0)">原本顺序</button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {orderType: 0,searchName: '',persons: [{id: 1,name: 'GeorgeDage',age: '22'},{id: 4,name: 'George',age: '28'},{id: 5,name: 'Tom',age: '18'},{id: 2,name: 'Jack',age: '24'},{id: 3,name: 'Cat',age: '26'},{id: 4,name: 'Mike',age: '13'},{id: 4,name: 'Mocina',age: '30'}]},methods: {setOrderType(orderType){this.orderType = orderType}},computed: {filterPerson() {let {orderType,searchName,persons} = this//过滤persons = persons.filter(p => p.name.indexOf(searchName) != -1)//排序if(orderType !== 0){persons = persons.sort(function(p1, p2){if (orderType === 1) {return p1.age-p2.age} else{return p2.age-p1.age} })}return persons}}})</script></body>
</html>

结果展示

Vue005_ 列表渲染相关推荐

Vue之for列表渲染、methods事件和model表单绑定
2.4 for列表渲染文档:https://cn.vuejs.org/v2/guide/list.html v-for指令可以绑定数组的数据来渲染一个项目列表 v-for指令需要使用item in ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的<微信小程序>专栏. 前言开发微信小程序离不开"页面渲染",对于初学者来说很难理解 ...
Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
Vue.js 列表渲染
用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 i ...
Vue的列表渲染指令
列表渲染指令 v-for 当需要将一个数组便利或者枚举一个对象循环显示时,就会用到列表渲染指令 v-for. 它的表达式需要结合in 来使用,类似于item in items的形式. <!do ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:  {{#if ok}}<h1> ...

Vue005_ 列表渲染

列表渲染

列表显示指令

2) 列表的更新显示

3) 列表的高级处理

代码示例：

结果展示

代码示例：

结果展示

Vue005_ 列表渲染相关推荐

最新文章

热门文章