Vue v-bind的动态绑定02入门基础

01 bind的基本使用

绑定

 某些时候我们并不想将变量放在标签内容中，像这样<h2>{ {message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{ {imgURL}}" alt="">，这也是错误的。

  <div id="app">
        <span :title="msg">你好呀</span>
    </div>


    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: `页面加载于${new Date().toLocaleString()}`
                }
            },
            methods: {

            },
            computed: {

            }
        })
    </script>

02 v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"（这里我用a代替，把a：里面的属性值写在getactive（）里面），当Dom元素有此class时候，变红<style>.a{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

 <!-- 动态绑定class -->
    <div id="app">
        <h1 :class="getactive()">你好</h1>
        <button type="button" @click="bianse()">bianse</button>
    </div>
    <script src="./v