Vue:v-show指令

来自CloudWiki
跳转至: 导航搜索

v-show指令表示根据表达式之bool值,觉得是否显示该元素。需要说明的是,如果bool值false,对应的Dom标签还是会渲染到页面上面,只是将该标签的css属性display设为none而已。而如果你用v-if值,bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看,如果你的需求是需要经常切换元素的显示和隐藏,使用v-show效率更高,而如果你只做一次条件判断,使用v-if更加合适。

v-show还常和v-else一起使用,表示如果v-show条件满足,则显示当前标签,否则显示v-else标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>


		<title></title>
	</head>
    <body>
        <div id="app">
            <h1>姓名:<label v-text="Name"></label></h1>
            <h1>是否已婚:<span v-show="IsMarry">是</span></h1>
            <h1>学校:{{ School }}</h1>
        </div>
    
        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            IsMarry: false,
            Age: 16,
            School:'光明小学',
        }
    
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
        </script>
    </body>
</html>

效果图

Vue2022040105.png