目录
v-show指令
控制标签是否显示
用法:和v-if类似 如:
v-show="一句话表达式(最后转换成boolean值,如果为真,则进行该标签显示,如果为假则该标签将display:none隐藏)"
功能:进行所在标签的显示与隐藏,但不管显示与隐藏,这标签都会渲染出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="isShow=!isShow">点我切换</button>
<!-- v-show只是设置标签的显示与隐藏display:none,
input框的值还能保留下来,v-if是不能保留下来这个值的
-->
<div v-show="isShow" key="1">
<p>用户名</p>
<input type="text" placeholder="请输入姓名">
</div>
<div v-show="!isShow">
<p>密码</p>
<input type="text" placeholder="请输入密码">
</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
}
})
</script>
</body>
</html>
v-if与v-show对比
v-if
是对标签控制是否进行渲染。如果true 渲染该标签
如果为false 不会渲染该标签
v-show
只是控制标签的显示与隐藏(display:none)。
应用场景:
-
当某些标签需要频繁切换使用时,建议优先考虑
v-show
,主要是在性能方向会更佳一些 -
当某些标签需要判断 条件较多,且切换不太频繁,就优先考虑
v-if
-
绝大部分场景优先使用
v-if
v-cloak指令(了解)
控制vue实例化完成前的dom样式
用法:
/* 通过属性选择器获取该属性所在标签来改变样式 */
[v-cloak] {
display: none;
}
<!-- 给标签加一个v-cloak属性(这时候可通过这个属性控制标签在vue实例化前的样式了),在vue实例化完成之后,v-cloak属性会消失 -->
<div id="#app" v-cloak>
{
{ message }}
</div>
功能:用于vue进行实例渲染完成前这段时间标签的样式处理,像上面代码就不至于让用户在vue渲染完成前看到{ {message}}这些字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* 通过属性选择器获取该属性所在标签来改变样式 */
[v-cloak] {
display: none;
}
</style>
<body>
<!-- 给标签加一个v-cloak属性(这时候可通过这个属性控制标签在vue实例化前的样式了),在vue实例化完成之后,v-cloak属性会消失 -->
<div id="app" v-cloak>
{
{msg}}
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
new Vue({
el: "#app",
data: {
msg: "测试一下"
}
})
}, 2000)
</script>
</body>
</html>
v-once指令(了解)
让该标签所有指令只执行一次
用法:
<span v-once>This will never change: {
{msg}}</span>
功能:让它所在标签