浅析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 相关文章推荐
DOM精简教程
Oct 03 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
js验证上传图片的方法
2015/05/12 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python CSV模块使用实例
2015/04/09 Python
python线程、进程和协程详解
2016/07/19 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
金融专业个人的自我评价
2013/10/18 职场文书
学生实习推荐信范文
2013/11/26 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
法学专业自我鉴定
2014/02/05 职场文书
运动会拉拉队口号
2014/06/09 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis