vue指令之表单控件绑定v-model v-model与v-bind结合使用
程序员文章站
2023-02-02 15:39:24
一、表单控件绑定v-model
v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将vue实例的数据...
一、表单控件绑定v-model
v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将vue实例的数据作为数据来源。
① 单行文本框 input[type="text"] 、多行文本框 textarea：
v-model值绑定到value属性；
<body>
<div id="app">
<input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
<textarea v-model="schoolname" value="我是初始学校：北大青鸟"></textarea><br/>
</div>
<script src="./vue.js"></script>
<script>
var vm = new vue({
el:'#app',
data:{
username:'小鸣',
schoolname:'xx科技大学'
}
})
</script>
</body>
ps：下面看下vue v-bind v-model的使用
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
<body>
<div class="app">
<span>multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new vue({
el:'.app'
})
</script>
checkbox
<body>
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkednames">
<label for="jack">jack</label>
<input type="checkbox" id="john" value="john" v-model="checkednames">
<label for="jack">john</label>
<input type="checkbox" id="mike" value="mike" v-model="checkednames">
<label for="jack">mike</label>
<br>
<span>checked names:{{checkednames}}</span>
</div>
</body>
<script>
new vue({
el:'.app',
data:{
checkednames:[]
}
})
</script>
v-bind
有些指令可以在其名称后面带一个“参数” (argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 html 特性
总结
以上所述是小编给大家介绍的vue指令之表单控件绑定v-model v-model与v-bind结合使用 ,希望对大家有所帮助