> 文章列表 > vue给input框属性赋值的方法

vue给input框属性赋值的方法

vue给input框属性赋值的方法

在Vue中,可以使用v-model指令实现双向数据绑定,让输入框的值与组件的数据属性保持同步。这里是一个简单的例子

  1. 创建一个Vue实例:
const app = new Vue({el: '#app',data: {inputValue: ''}
});
  1. 在页面中使用v-model指令:
<div id="app"><input type="text" v-model="inputValue" /><p>输入框的值:{{ inputValue }}</p>
</div>

在这个例子中,我们创建了一个Vue实例,并在data​属性中定义了一个名为inputValue​的变量。然后,在HTML中使用v-model​指令将inputValue​与输入框的值进行了双向绑定。现在,当用户在输入框中输入内容时,inputValue​会自动更新,同时显示在<p>​标签中。