Vue之条件渲染v-if和v-show

简介

主要介绍vue的条件渲染的两个指令语法v-if和v-show。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>条件渲染</title>
</head>
<body><div id="root"><!-- 纯v-if展示 --><div v-if="n==1">当n=1时渲染</div><div v-if="n==1">当n=1时渲染</div><div v-if="n==1">当n=1时渲染</div><!-- 上面上个的条件都是一样的，可以使用template来括起来。 --><!-- <template v-if="n==1"><div >当n=1时渲染</div><div >当n=1时渲染</div><div >当n=1时渲染</div></template> --><div v-if="n==2">当n=2时渲染</div><div v-if="n==3">当n=3时渲染</div><div v-if="n==4">当n=4时渲染</div><!-- 纯v-show展示 --><div v-show="n==1">当n=1时渲染</div><div v-show="n==1">当n=1时渲染</div><div v-show="n==1">当n=1时渲染</div><div v-show="n==2">当n=2时渲染</div><div v-show="n==3">当n=3时渲染</div><div v-show="n==4">当n=4时渲染</div><button @click="n++">n+1</button><!-- 还有一种是if  else if  else的形式，与js分支的逻辑一致 --><div v-if="n==1">当n=1时渲染</div><div v-else-if="n==2">当n=2时渲染</div><div v-else-if="n==3">当n=3时渲染</div><div v-else-if="n==4">当n=4时渲染</div><div v-else>当n=其他时渲染</div></div>
</body><script src="./js/vue.js"></script>
<script>new Vue({el:"#root",data:{n:1}})
</script>
</html>

v-if和v-show的区别是，v-if如果不符合条件时，直接就不渲染该元素，也就是页面上实际上没有该元素，适用于切换频率较低的场景，v-show如果不符合条件时，只是会把该元素加上样式 display:none进行隐藏，实际上元素是存在的，适用于切换频率较高的场景。

Vue之条件渲染v-if和v-show相关推荐

vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染
介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if.if-else.if-else-if,show等 ...
Vue.js 条件渲染
v-if 在字符串模板中,比如 Handlebars,我们得像这样写一个条件块:  {{#if ok}}<h1>Yes</h1 ...
Vue的条件渲染指令
与JS的条件语句类似,Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if,v-else要紧跟v-else-if或者v--if,表达式的值为真时,当前元 ...
vue 限制渲染条数_深入理解Vue 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组在使用 ...
Vue的条件渲染和对象渲染
条件渲染通过条件指令可以控制元素的创建(显示)或者销毁(隐藏) v-if 条件判断使用 v-if 指令 v-else v-else 指令给 v-if 添加一个 "else" 块 ...
Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. <!DO ...
【猿说VUE】条件渲染，绝代双骄之 v-if 和v-show
7 VUE基础:条件渲染 Vue中用来做条件渲染的指令:v-if 和v-show. 7.1 v-if条件 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候 ...
Vue 12 - 条件渲染 v-show v-if
目录 v-show和v-if介绍 v-if 和v-else-if介绍小功能展示代码演示结果截图本章总结其他总结: v-show和v-if介绍 v-show 和 v-if 是 Vue.js 框 ...
3.Vue 条件渲染
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 3.Vue指令之条件渲染这篇 ...

Vue之条件渲染v-if和v-show

简介

Vue之条件渲染v-if和v-show相关推荐

最新文章

热门文章