4.1.2　v-bind指令

v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。

下面示例中，将按钮的title和style属性通过v-bind指令进行绑定，这里对于样式的绑定，需要构建一个对象。其他对于样式的绑定方法，将在后面的学习中详细介绍。

【例4.2】v-bind指令（源代码\ch04\4.2.html）。

    <div id="app">
        <input type="button" value="按钮" v-bind:title="Title" v-bind:style="{col
or:Color,width:Width+'px'}">
        <p><a :href="Address">超链接</a></p>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                Title: '这是我自定义的title属性',
                Color: 'blue',
                Width: '100',
                Address:"https://www.baidu.com/"
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，按F12键打开控制台，并切换到“Elements”选项，可以看到数据已经渲染到了DOM中，结果如图4-3所示。