Vue3.x系列基础指令 v-show显示隐藏

内置指令：

v-show 根据表达式值的真假显示或隐藏html元素

v-show 指令是通过css样式 display控制元素的显示与否

v-show指令实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-show="yes">yes</h1>
    <h1 v-show="no">no</h1>
    <h1 v-show="age >= 25">age: {{age}}</h1>
    <h1 v-show="name.indexOf('zhangsan') >= 0">Name:{{name}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm  = Vue.createApp({
    data(){
        return {
            yes:true,
            no:false,
            age:28,
            name:"zhangsan"
        }
    }
}).mount("#app");
</script>
</body>
</html>

只要一个人还有追求，他就没有老。直到后悔取代了梦想，一个人才算老。熬过了必须的苦，才能过上喜欢的生活。

Vue3.x系列基础指令 v-show显示隐藏

评论

相关文章