Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）

完整案列demo：

<html><head><title>列表渲染--v-for遍历数组生成元素</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head><body><!-- 遍历数组 --><div><ul id="example"><li v-for="(item,index) in items">{{item.message}} -- {{index+1}}</li></ul></div><!-- 遍历对象，key-vaule键值对 --><!-- 注意参数的顺序，不要乱来 --><div><ul id="example1"><li v-for="(value,key,index) in person">{{index+1}}:{{key}}:{{value}}</li></ul></div><div><!-- 计算属性 过滤得到偶数--><ul id="example2"><li v-for="n in evennumbes">{{n}}</li></ul><!-- 不使用计算computed，使用普通方法过滤 得到奇数--><ul id="example3"><li v-for="n in odd(numbers)">{{n}}</li></ul></div><div id="example4">添加一个Todo：<!-- keyup.enter: input按下enter键，触发事件(方法) -- addTodoText  --><input v-model="newTodoText" @keyup.enter="addTodoText" placeholder="add new Todo"><!-- 使用注册组件方法1：标记li是一个"todo-item"类型的组件，解决浏览器潜在的解析错误 --><!-- <ul><li is="todo-item" v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @removeTodo="todos.splice(index,1)"></li></ul> --><!-- 使用注册组件方法2：直接使用"todo-item"类型的组件 注意组件模板中的绑定值需要指定 否则组件渲染失败--><ul><!-- splice方法，对数组或列表中指定的index上的元素进行添加/删除操作，第二个参数(删除的项目数量)等于0表示不删除，等于1表示删除 --><todo-item v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @removetodo="todos.splice(index,1)"></todo-item></ul></div>
</body>
<script>// 注册组件Vue.component('todo-item', {//$emit 触发自定义事件 removetodotemplate: "<li>{{title}}   <button @click=\"$emit('removetodo')\">删除</button></li>",//属性title 和 todo.title 对应props: ['title']})var app5 = new Vue({el: '#example4',data: {newTodoText: '',todos: [{id: 1,title: '打篮球',},{id: 2,title: '玩自由之战',},{id: 3,title: '学习'}],newID: 4 //添加新元素，从4开始往后叠加++},methods: {addTodoText: function () {//console.log(this.newTodoText)this.todos.push({id: this.newID++,title: this.newTodoText})// 将newTodoText重置为空 避免干扰再次添加Todothis.newTodoText = ''}}})var app3 = new Vue({el: '#example2',data: {numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},//    计算偶数，必须是getter性质的，必须returncomputed: {evennumbes: function () {//filter过滤函数，参数是一个boolean类型的值，函数过滤满足参数条件的对象集合并返回return this.numbers.filter(function (number) {return number % 2 === 0})}}})var app4 = new Vue({el: '#example3',data: {numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},//    计算偶数，必须是getter性质的，必须returnmethods: {odd: function (numbers) {return numbers.filter(function (number) {return number % 2 != 0})}}})var app = new Vue({el: '#example',data: {items: [{message: '篮球'},{message: '足球'},{message: '田径'}]}})var app2 = new Vue({el: '#example1',data: {person: {firstName: 'yu',lastName: 'kun',sex: 'Male',age: 27}}})
</script></html>

一、遍历数组

（1）DOM

（2）数据模板

v-for指令相当于C#中的foreach，Java中的加强for，格式：item in items，items为数组或者集合，item为遍历数组或集合时取出的单个对象，当然，vue也支持取出对象所在的位置index，也就是（item，index） in items，注意参数的顺序不要搞错了！

（3）显示

二、遍历对象（map），以键值对k：v的形式渲染DOM

（1）DOM

（2）数据模板

和遍历数组一样，遍历map对象时，注意参数顺序，也可以单独只取出value，比如 v-for="value in person"

(3)显示

三、结合computed+filter函数，遍历过滤后的偶数/奇数数组

（1）DOM

（2）数据模板

（3）显示

四、v-for指令与组件注册相结合实现todos的添加和删除

（1）DOM

（2）todo-item组件注册

注意自定义事件的名称：removetodo 要小写，不要写成removeTodo，遵循W3C标准

（3）数据模板

给v-for中的每一个元素，实际上是一个li元素，赋予一个唯一的key值（id）

2.2.0+ 以上版本中，当对组件使用 v-for 时，必须设置 key 属性

（3）显示

Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）相关推荐

Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
php 从大到小显示,vue.js,javascript_Vue 在列表渲染的时候，能排序显示么。比如按价格从大到小排序，vue.js,javascript - phpStudy...
Vue 在列表渲染的时候,能排序显示么. 比如按价格从大到小排序 // json { "data": [ { "name": "山鹰登山社" ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
Vue指令篇_v-for_列表渲染
今天要写的是Vue很香的一个指令v-for,这个指令在结构中实现循环,基于数据多次渲染元素,在减少代码量的情况下,又使得逻辑关系一目了然,很奈斯.不多说啦,就开始吧. 目录 1.使用方法 1)v-fo ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）

Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）相关推荐

最新文章

热门文章