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，樣式就會綁定上，反之不會綁定。