3.Vue学习：Vue指令

2024-03-13 15:54:33

1、v-text设置标签文本值：如果标签里面原来有值会被覆盖

    <div id="first">
        <h2 v-text="message + '!'"></h2>
        <h2 v-text="info + '!' "></h2>
        <h2> {{ message + '!'}}</h2>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el: '#first',
            data: {
                message: 'hello word!',
                info: '你好!'
            }
        })
    </script>

2、v-html：如果data数据是纯文本，作用和v-txet一样，如果里面数据是标签，可以解析

3、v-on：绑定事件指令：可以使用@符号替代

    <div id="first">
        <input type="button" value="点我" v-on:click='doIt'>
        <input type="button" value="点我" @click='doIt'>

        <h2 @click='change'>{{ message }}</h2>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el: '#first',
            data: {
                message: 'hello word!',
            },
            methods: {
                doIt: function () {
                    alert('hello word')
                },
                change: function () {
                    this.message += '你好'    // this关键字获取data中的数据
                }
            }
        })
    </script>

4、v-show：切换元素的显示状态：true/false

①、可以直接写：v-show=‘true’。

②、使用表达式：v-show=‘age > 18’。

5、v-if：根据表达式的真假切换显示状态，和show类似。

①、两者的不同：v-show改变的是display，标签依然还是在页面中，只是看不到；v-if是直接将标签从页面中删除。

②、使用场景：如果是要频繁切换显示状态的就用show。

6、v-bind：设置元素的属性：src、title、class等

①、v-bind可以简写为冒号 :

②、改变元素class建议写法：{active：isActive}：是否增加类名取决于后面的真假

<body>
    <div id="first">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src='imgSrc' alt="" :title="imgTitle" :class='{active:isActive}' @click='change'>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el: '#first',
            data: {
                imgSrc: "http://www.itheima.com/images/logo.png",
                imgTitle: "黑马程序员",
                isActive: false
            },
            methods: {
                change: function () {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>

码农公寓

相关文章