vue的注意规范之v-if 与 v-for 一起使用教程

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

使用推荐方式：

<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

或者：放在计算属性遍历

computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

总结

以上所述是小编给大家介绍的vue的注意规范之v-if 与 v-for 一起使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"

  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件:v-show只是简单的基于css切换: (3)编译条件:v-if是惰性的,如果初始条件为假,

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • Vue.js学习记录之在元素与template中使用v-if指令实例

    Vue.js学习记录之在元素与template中使用v-if指令实例

    本文主要给大家介绍的是关于Vue.js在元素与template中使用v-if指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>&

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历 比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>

  • vue使用v-for实现hover点击效果

    vue使用v-for实现hover点击效果

    使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在上面的元素.所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式. 在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • vue的注意规范之v-if 与 v-for 一起使用教程

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中 所以,不推荐v-if和v-for同时使用 使用推荐方式: <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> <ul v-if="shouldSh

  • Vue前端书写规范大全(非常详细!)

    命名规范 s:表示字符串.例如:sName,sHtml;n:表示数字.例如:nPage,nTotal;b:表示逻辑.例如:bChecked,bHasLogin;a:表示数组.例如:aList,aGroup;r:表示正则表达式.例如:rDomain,rEmail;f:表示函数.例如:fGetHtml,fInit;o:表示以上未涉及到的其他对象,例如:oButton,oDate; 1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr. 2:循环变量可以简写,比如:i,

  • vue裁切预览组件功能的实现步骤

    vue版本裁切工具,包含预览功能 最终效果: qiuyaofan.github.io/vue-crop-de- 源码地址: github.com/qiuyaofan/v- 第一步:先用vue-cli安装脚手架(不会安装的看 vue-cli官网) // 初始化vue-cli vue init webpack my-plugin 第二步:创建文件 新建src/views/validSlideDemo.vue, src/components里新建VueCrop/index.js,VueCrop.vue

  • vue语法自动转typescript(解放双手)

    vue语法自动转typescript(解放双手)

    代码的复用是一件很常见的事情,如果是公共代码的复用那还好说,直接做成一个内部私有库,想用的话安装一下 npm包就行了,但是业务代码的复用就不好做成包了,一般都是复制粘贴 我一般写代码的时候,如果觉得某段业务代码以前见过其他人写过,那么考虑到业务优先性,只要别人的代码不是写得太烂,我一般会优先抄别人的代码,省得自己再写一遍 然后我就遇到了一个问题,公司目前前端项目大部分都是 vue,早期没有 ts这个说法,后来新项目才逐渐引入 ts,所以新项目用的是 vue-ts,而一般想抄的老代码都是没有引入

  • 使用idea创建vue项目的图文教程

    使用idea创建vue项目的图文教程

    目录 一.安装node.js (1)下载安装包 (2)测试node.js是否安装成功 (3)安装vue和全局vue-cli 二.idea安装vue.js插件 三.创建vue项目 四.修改配置文件 五.配置idea运行的环境 总结 一.安装node.js 官网下载下载地址:Download | Node.js (1)下载安装包 安装过程很简单,全部next即可. (2)测试node.js是否安装成功 在键盘按下win+R键,输入cmd回车,打开cmd窗口: 查看版本操作:node -v和npm -

  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新. 首先把基本的样式写好,这里就略过了,然后引入better-scroll库 import BScroll from 'better-scroll'

  • windows下vue.js开发环境搭建教程

    windows下vue.js开发环境搭建教程

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希望初

  • 从0开始学Vue

    Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. 利用new Vue()创建一个Vue实例 我们可以先初始化一个html页面,然后我们需要引入Vue 的 js 文件.引入的方式有很多,我们可以在script中引入

  • vue.js如何将echarts封装为组件一键使用详解

    vue.js如何将echarts封装为组件一键使用详解

    前言 本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 说明 做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview.element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装 控件演示 控件使用 概要 基于echarts的二次封装 由数据驱动 控件源码见src/com

随机推荐