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> <div> <!--也可以使用 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"> </div> </div>
<div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true } })
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 较好。
给 Num 绑定一下,可以看出来随机数字是多少:
new Vue({
el: '#app',
data:{
Num:Math.random()
}
})
I like this
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
61Vue.js 条件语句
v-else-if 使用实例:
60Vue.js 条件语句
59Vue.js 条件语句
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 较好。
58Vue.js 模板语法
给 Num 绑定一下,可以看出来随机数字是多少:
new Vue({
el: '#app',
data:{
Num:Math.random()
}
})
56Vue.js 模板语法
I like this