Vue其他常用指令_amtvue :xl是什么-CSDN博客

本文链接：https://blog.csdn.net/XLGKXSH/article/details/99290787

Vue其他常用指令

v-bind：将变量中的值通过v-bind绑定到元素指定的属性

eg：v-bind：style v-bind:class

v-bind也支持简写（v-on：相当于：）

v-show：v-show=“表达式” ，根据表达式执行的结果的真假，来切换display显示还是隐藏

v-text：v-text=“变量”，根据变量更新对应的文本内容

v-html：v-html=“变量”，根据变量更新对应的innerHTML

例子：

<body>
    <div id="container">
        <h1>{{msg}}</h1>
        <!-- v-bind实现将变量中值  绑定到属性 -->
        <img v-bind:src="'img/'+imgUrl" width=50px height=50px>
        <a v-bind:href="myLink">tiaozhuan</a>

        <button v-on:click="modifyBGColor">修改背景色</button>
        <h1 v-bind:style="{backgroundColor:myBGColor}">背景色会被修改</h1>

        <p v-bind:class="{myRed:isRed}">我的字体会变颜色</p>

        <button v-bind:disabled="!isValid">clickMe</button>

        <button v-show="hasMore">加载更多</button>
        <p v-show="!hasMore">没有更多的数据可以加载</p>

        <div v-html="myHtml"></div>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                imgUrl: '1.jpg',
                myLink: 'http://www.baidu.com',
                myBGColor: "#ff0000",
                isRed: false,
                isValid: false,
                hasMore: true,
                myHtml: "<h1>我是麻子</h1>"
            },
            methods: {
                modifyBGColor: function () {
                    this.myBGColor = "#0000ff"
                }
            }
        })
    </script>
</body>