(7) Attribute binding

1、vue How to handle attributes dynamically

        v-bind Instruction usage

                <a v-bind:href='url'> Jump </a>

        Abbreviation form

                <a:href='url'> Jump </a>

    <div id="app">
        <a v-bind:href="url" v-text="baidu"></a>
        <a :href="url"> Baidu 1</a>
        <button v-on:click="handle"> Switch </button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url:'http://www.baidu.com',
                baidu:' Baidu '
            },
            methods:{
                handle:function(){
                    // modify url Address 
                    this.url = 'http://itcast.cn'
                    this.baidu=' Spreading wisdom Podcast '
                }
            }
        })
    </script>

Click to switch , Click Baidu again , Will switch url Value , Go to another page . 

v-model The essence of

    <div id="app">
        <div>{
   {msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
        <input type="text" v-model="msg">
        <!-- v-model The essence of  -->
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{
            handle:function(event){
                // Use the latest data in the input field to overwrite the original data 
                this.msg = event.target.value;
            }
        }
        })
</script>