尝试一下 »
苏安年
188***625@qq.com
简单道人
287***571@qq.com
参考地址
v-if 与 v-show 的区别?
在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。 v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下, v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
ILE_HAO
719***187@qq.com
<div id="app"> <h1 v-show="ok">Hello!</h1> <script> new Vue({ el: '#app', data: { ok: true 这里的 ok 参数值和 JavaScript 中的判断一致,为 0、null、undefined、false 时为假,其他值为真。ILE_HAO ILE_HAO 719***187@qq.com5年前 (2018-04-25)
M.森
153***7040@qq.com
v-else-if 使用实例:
<div id="vApp"> <!--v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用--> <input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp"> <h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2> <h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2> <h2 v-else-if="calLen(inp)>0">输入了字符</h2> <h2 v-else>没有输入字符</h2> <!--也可以使用 v-show 指令来根据条件展示元素--> <img src="../asset/img/ic_user.png" v-show="calLen(inp)<=0"> <img src="../asset/img/ic_question.png" v-show="calLen(inp)>0"> <img src="../asset/img/ic_stop.png" v-show="calLen(inp)>5"> <img src="../asset/img/ic_info.png" v-show="calLen(inp)>10"> 尝试一下 »M.森 M.森 153***7040@qq.com 参考地址5年前 (2018-06-19)
离海的枯梧
610***433@qq.com
v-if 和 v-show 区别:
v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
晓晓的寄己
867***282@qq.com
演示 v-else-if 用法,根据分数来判断等级:
<div id="app"> <div v-if="type>='90'"> <div v-else-if="type<90&type>=80"> <div v-else-if="type<80&type>=70"> <div v-else-if="type<70&type>=60"> <div v-else-if="type<60" > 尝试一下 »晓晓的寄己 晓晓的寄己 867***282@qq.com5年前 (2018-11-29)
隐
hyx***63@163.com
关于 <template></template> 内容可见性问题:
当 <template> 元素被包含在已被 vue 实例化之后的组件中时浏览器会正常渲染 可以用 v-if="false" 隐藏浏览器不会解析,不能使用 v-show。
<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> <script> new Vue({ el: '#app', data: { seen: true, ok: false </script>
当 <template> 存在于未被 vue 实例化的组件中时可以正常隐藏,天生 display:none 。