v-bind的使用

v-bind的使用

v-bind是动态数据绑定的一种方式。你可以在任何元素上使用该指令，该指令有一种简写方式:paramName，就是一个冒号+参数名，数据可以是任何格式的。

代码：

<template>
  <div>
    <input :id="inputId" v-bind:value="value" >
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:'测试',
            inputId:'testId'
        }
    }
}
</script>

<style>
</style>

在页面上我们通过元素审查，可以看到body内：

<div>
    <input id="testId">
    <p>测试</p>
</div>

input控件的Id已经被绑定为testId，不过这种绑定不是双向绑定，你可试着修改下输入框的值，p标签内的数据并没有发生改变。