Vue2.x_1.7 指令v-if、v-show

app.js

new Vue({
    el:"#vue-app",
    data:{
        show:false,
        see:false,
        test:false,
    },
})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">

        <h1>控制标签是否展示v-if(不占用网页文档)</h1>
        <button v-on:click="show = !show">展示开关1</button>
        <button v-on:click="see = !see">展示开关2</button>
        <p v-if="show">Hello World</p>
        <p v-else-if="see">Else Hello World</p>
        <h1>控制标签是否展示v-show(标签的display属性控制显示,占用网页文档)</h1>
        <button v-on:click="test = !test">v-show开关</button>
        <p v-show="test">v-show Hellow World</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson07

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment