Vue指令2 | 易学教程

v-show: 根据表达值真假,切换元素的显示和隐藏(本质是改变display)

<body>
    <div id="app">
        <h1 v-show="isShow"> {{ msg }} </h1>
        <button @click="changeShow">isShow</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                changeShow: function () {
                        this.isShow=!this.isShow;
                }
            },
            data: {
                msg: "VVVV-show!!",
                isShow: true,
            }
        })
    </script>
</body>

在这里插入图片描述
点击后

v-if(和v-show类似)
v-show操纵样式
v-if操纵dom
v-bind(设置元素属性)v-bind可省略

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc2" alt="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc:"https://i0.hdslb.com/bfs/archive/1be2fd76cc98cdc6a595c05c3134fbf937a1c126.png",
                imgSrc2:"https://i0.hdslb.com/bfs/active/f8514c2a7f3dc94a71f7feacc746f78ccae970c3.gif"
            }
        })
    </script>
</body>

在这里插入图片描述

应用-图片切换

<body>
    <div id="app">
        <a href="#" @click="prev" v-show="index>0">←</a>
        <a href="#" @click="next" v-show="index<imgArr.length-1">→</a>
        <br>
        <img v-bind:src="imgArr[index]" alt="">
        <br>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: ["https://i0.hdslb.com/bfs/archive/1be2fd76cc98cdc6a595c05c3134fbf937a1c126.png",
                "https://i0.hdslb.com/bfs/active/f8514c2a7f3dc94a71f7feacc746f78ccae970c3.gif",
                "https://i2.hdslb.com/bfs/archive/c57468a5a6851db541f00c8967ea85c21101931c.jpg"],
                index:0,
                isShow:true
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

在这里插入图片描述

总结

来源：CSDN

作者：张先生没走丢

链接：https://blog.csdn.net/weixin_41570271/article/details/104474844

标签

vue

app