VUE 属性绑定

给A标签的url进行动态的绑定

两种方式

1.v-bind:href="Url"  无简写版本Vue

2、:href="Url"   简写版本

<div id="Bind">
        <a v-bind:href="Url">百度</a>
        <input id="Button1" v-on:click="handle" type="button" value="切换" />
    </div>

 var Bind = new Vue({
        el: "#Bind",
        data: {
            Url:"http://www.baidu.com"
        },
        methods: {
            handle: function () {
                this.Url="https://www.kxdao.net/forum.php"
            }
        }
    })

可以动态的更换Url

------------------Style 样式的绑定

<style>
        .active{
            border:1px solid red;
            width:100px;
            height:100px;
        }
        .error{
            background-color:orange;
        }
    </style>

<div id="Style">
        <div v-bind:class="{active:isActive,error:isError}">
            测试样式
        </div>
        <input id="Button1" v-on:click="handle" type="button" value="切换效果" />
    </div>

var style = new Vue({
        el: "#Style",
        data: {
            isActive: true,
            isError: true

        },
        methods: {
            handle: function () {
                //控制isActive的值在true和false之间进行切换
                this.isActive = !this.isActive;
                this.isError = !this.isError;
            }
        }
    })

<div v-bind:class="{active:isActive,error:isError}">
我们可以看到这种键值对类型，active对应我们在上面定义的Style，后面跟一个isActive这是表示，如果这个值为true，样式就会绑定上，反之不会绑定。