Vue.js 指令v-for和v-if和v-show
2024-05-10 08:28:35
文章目录
- Vue指令之`v-for`和`key`属性
- 代码演示
- v-for循环普通数组
- v-for循环对象数组
- v-for循环对象
- v-for迭代数字
- v-for循环中key属性的使用
- Vue指令之`v-if`和`v-show`
- 品牌管理案例
- 代码演示
- 根据条件筛选品牌 根据条件筛选品牌
Vue指令之v-for和key属性
- 迭代数组
<ul><li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 --><div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>- 迭代数字
<p v-for="i in 10">这是第 {{i}} 个P标签</p>2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
代码演示
v-for循环普通数组
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><!-- <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p> --><p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [1, 2, 3, 4, 5, 6]},methods: {}});</script>
</body></html>
v-for循环对象数组
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [{ id: 1, name: 'zs1' },{ id: 2, name: 'zs2' },{ id: 3, name: 'zs3' },{ id: 4, name: 'zs4' }]},methods: {}});</script>
</body></html>
v-for循环对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --><p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {user: {id: 1,name: '托尼·屎大颗',gender: '男'}},methods: {}});</script>
</body></html>
v-for迭代数字
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --><!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --><p v-for="count in 10">这是第 {{ count }} 次循环</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script>
</body></html>
v-for循环中key属性的使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --><!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --><!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '赵高' },{ id: 4, name: '韩非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script>
</body></html>
Vue指令之v-if和v-show
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><!-- <input type="button" value="toggle" @click="toggle"> --><input type="button" value="toggle" @click="flag=!flag"><!-- v-if 的特点：每次都会重新删除或创建元素 --><!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --><!-- v-if 有较高的切换性能消耗 --><!-- v-show 有较高的初始渲染消耗 --><!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --><!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --><h3 v-if="flag">这是用v-if控制的元素</h3><h3 v-show="flag">这是用v-show控制的元素</h3></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {/* toggle() {this.flag = !this.flag} */}});</script>
</body></html>
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
品牌管理案例
功能：
- 添加新品牌
- 删除品牌删除品牌
- 根据条件筛选品牌 根据条件筛选品牌
代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"><!-- 需要用到Jquery吗？？？ -->
</head><body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" v-model="id"></label><label>Name:<input type="text" class="form-control" v-model="name"></label><!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords"></label></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --><!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --><!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime }}</td><td><a href="" @click.prevent="del(item.id)">删除</a></td></tr></tbody></table></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',keywords: '', // 搜索的关键字list: [{ id: 1, name: '奔驰', ctime: new Date() },{ id: 2, name: '宝马', ctime: new Date() }]},methods: {add() { // 添加的方法// console.log('ok')// 分析：// 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；// 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car)this.id = this.name = ''},del(id) { // 根据Id删除数据// 分析：// 1. 如何根据Id，找到要删除这一项的索引// 2. 如果找到索引了，直接调用 数组的 splice 方法/* this.list.some((item, i) => {if (item.id == id) {this.list.splice(i, 1)// 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环return true;}}) */var index = this.list.findIndex(item => {if (item.id == id) {return true;}})// console.log(index)this.list.splice(index, 1)},search(keywords) { // 根据关键字，进行数据的搜索/* var newList = []this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}})return newList */// 注意： forEach some filter findIndex 这些都属于数组的新方法，// 都会对数组中的每一项，进行遍历，执行相关的操作；return this.list.filter(item => {// if(item.name.indexOf(keywords) != -1)// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，则返回 true ，否则返回 false// containif (item.name.includes(keywords)) {return item}})// return newList}}});</script>
</body></html>
根据条件筛选品牌 根据条件筛选品牌
- 1.x 版本中的filterBy指令，在2.x中已经被废除：
filterBy - 指令
<tr v-for="item in list | filterBy searchName in 'name'"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr>- 在2.x版本中手动实现筛选的方式：
- 筛选框绑定到 VM 实例中的
searchName属性：
<hr> 输入筛选名称：<input type="text" v-model="searchName">- 在使用
v-for指令循环每一行数据的时候，不再直接item in list，而是in一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：
<tbody><tr v-for="item in search(searchName)"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr></tbody>search过滤方法中，使用 数组的filter方法进行过滤：
search(name) {return this.list.filter(x => {return x.name.indexOf(name) != -1;});}源代码链接：查看
学习视频链接：查看
Vue.js 指令v-for和v-if和v-show相关推荐
- （9）vue.js 指令（1）
一.vue.js指令介绍 指令的本质就是 HTML 自定义属性,Vue.js 的指令就是以 v- 开头的自定义属性.我们HTML元素非为固有属性和自定义属性,固有属性就是自己元素本身就有的,比如id, ...
- vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
- （11）vue.js 指令（3）
一.事件处理指令v-on • 用于进行元素的事件绑定.示例1: • Vue.js 还为 v-on 指令提供了简写方式.示例2:v-on的简介方式 • 事件程序代码较多时,可以在 methods 中设 ...
- （10）vue.js 指令（2）
八.渲染指令-v-for v-for介绍:v-for指令用于遍历数据渲染结构,常用的数组与对象均可遍历. 示例1:渲染数组当中的数据,item是一个自己起的标识,in是固定的关键字,再···里,arr ...
- 作用于HTML元素的Vue.js指令
我在这里学习内置指令 v-model v-if v-show v-else v-for v-bind v-on v-model表单数据模型双向绑定 example: ① 表单文本输入框效果 <i ...
- Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- 一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- vue.js纪录片---kalrry
vue.js纪录片---kalrry https://www.youtube.com/watch?v=OrxmtDw4pVI
最新文章
- leetcode 41. First Missing Positive
- 2017 04 04 省选模拟
- FireBug的控制台管理
- 上传和优化Magento 2中的产品图像和视频
- 简单网络管理协议(SNMP)实现linux系统信息网络监控
- servlet乱码问题
- HackerOne《2020年黑客驱动安全报告》：中国白帽子的收入增长幅度最大
- 数据集（benchmark）、常用数据集的解析（cifar-10、）
- 长虹CIRI语音智能电视技术原理简析
- java原码、补码、反码总结
- 启示录2：打造优秀的产品团队
- 亚马逊利润_大流行给亚马逊带来了创纪录的利润
- NUVOTON的IAP SFR
- 去中心化数据库：传统IT与区块链的未来融合形式
- 自定义注解+拦截器优化项目代码
- 获取某一年指定自然周的开始时间和结束时间
- 计算H时M分S秒以后是_最全的风机计算公式，学习了！
- 微信公众号授权登录之二（tp5）
- [python] 4.比心
- python基础 -23- 模块(random,chardet,os,sys,copy,time,datetime,pytz,pickle,json,MD5,SHA-1,shutil,re等)