（7）属性绑定

1、vue如何动态处理属性

        v-bind指令用法

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

        缩写形式

                <a:href='url'>跳转</a>

    <div id="app">
        <a v-bind:href="url" v-text="baidu"></a>
        <a :href="url">百度1</a>
        <button v-on:click="handle">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url:'http://www.baidu.com',
                baidu:'百度'
            },
            methods:{
                handle:function(){
                    //修改url地址
                    this.url = 'http://itcast.cn'
                    this.baidu='传智播客'
                }
            }
        })
    </script>

点击切换，再次点击百度，就会切换url的值，转到别的页面去。 

v-model的本质

    <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的本质 -->
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{
            handle:function(event){
                //使用输入域中的最新的数据覆盖原来的数据
                this.msg = event.target.value;
            }
        }
        })
</script>