浅析Vue.js 中的条件渲染指令


Posted in Javascript onNovember 19, 2018

1 应用于单个元素

Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。

html:

<div id="app">
 <p v-if="type===1">拌面</p>
 <p v-else-if="type===2">扁肉</p>
 <p v-else="type===3">其它</p>
</div>

js:

<script>
 var app = new Vue({
  el: '#app',
  data: {
   type: 2
  }
 });
</script>

输出结果:

扁肉

当表达式的值为 true 时,当前元素或组件及所有的子节点都会被渲染出来。

2 应用于多个元素

上述示例中的代码只能判断当前元素, 如果需要一次性判断多个元素,那么可以使用 <template> 元素并在该元素中使用条件指令,最终的渲染结果不会包含 <template> 元素 。

html:

<div id="app2">
 <template v-if="type==='菜单'">
  <p>拌面</p>
  <p>扁肉</p>
  <p>其它</p>
 </template>
</div>

js:

var app2 = new Vue({
 el: '#app2',
 data: {
  type:'菜单'
 }
});

渲染后的代码:

<div id="app2"><p>拌面</p> <p>扁肉</p> <p>其它</p></div>

3 性能上的考量

另外 Vue.js 出于性能方面的考虑,会尽可能地复用已有的元素。

html:

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号:</label>
  <input placeholder="请输入手机号">
 </template>
 <template v-else>
  <label>邮箱:</label>
  <input placeholder="请输入邮箱">
 </template>
 <button @click="toggleAccount">切换账号</button>
</div>

js:

var app3 = new Vue({
 el: '#app3',
 data: {
  type: 'mobile'
 },
 methods: {
  toggleAccount: function () {
   this.type = (this.type === 'mobile' ? 'mail' : 'mobile');
  }
 }
});

效果( demo ):

浅析Vue.js 中的条件渲染指令

从示例效果中我们可以发现,输入框的内容并没有发生变化,说明这里 Vue.js 复用了 <input> 元素。

我们也可以通过指定 input 元素的唯一的 key 来避免被复用。

html:

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号:</label>
  <input placeholder="请输入手机号" key="mobile">
 </template>
 <template v-else>
  <label>邮箱:</label>
  <input placeholder="请输入邮箱" key="email">
 </template>
 <button @click="toggleAccount">切换账号</button>
</div>

效果:

浅析Vue.js 中的条件渲染指令

我们为每一个 input 指定了 key 属性,所以它们是独立的,每次点击都不一样。而这里的 label 是可复用的,因为我们没有给它设定 key 属性。

总结

以上所述是小编给大家介绍的Vue.js 中的条件渲染指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
简单的js分页脚本
May 21 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JS实现简易留言板增删功能
Feb 08 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
使用Javascript简单计算器
Nov 17 #Javascript
JS实现图片切换效果
Nov 17 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP与MySQL交互使用详解
2006/10/09 PHP
php xml 入门学习资料
2011/01/01 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
中科方德软件测试面试题
2016/04/21 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
病人慰问信范文
2015/02/15 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书