任务:创建一个简单的表单,包含一个文本输入框。绑定一个数据属性,使得用户在输入框中输入的内容能够实时显示在页面上。 提示:使用 v-model 指令进行双向数据绑定
时间: 2024-11-09 21:28:56 浏览: 23
JS 实现动态插入输入框以及删除、位置调换
4星 · 用户满意度95%
创建一个简单的表单,并使用Vue.js的v-model指令实现数据绑定,你可以按照以下步骤操作:
1. 首先,在HTML部分,创建一个`<input>`元素,设置type为"text",并且添加`v-model`指令关联到Vue实例的数据属性。例如:
```html
<div id="app">
<label for="text-input">请输入内容:</label>
<input type="text" id="text-input" v-model="message">
<p>您输入的内容:{{ message }}</p>
</div>
```
在这个例子中,`v-model="message"`表示当用户在输入框中输入时,`message`数据会同步更新;同时,`{{ message }}`会在页面上显示用户输入的内容。
2. 然后,你需要在Vue组件的JavaScript部分创建一个新的Vue实例,并初始化`message`属性:
```javascript
new Vue({
el: '#app',
data: {
message: ''
}
})
```
这样,当你在输入框中输入文字时,下面的段落将实时显示你输入的内容。
阅读全文