Vue之v-model指令实现数据双向绑定
v-bind指令只能实现数据的单向绑定,从M绑定到V,无法实现双向绑定。使用v-model指令,可以实现表单元素和Model中数据的双向绑定,并且v-model指令只能运用在表单元素中。<html><head><meta http-equiv="Content-Type" content="text
·
v-bind指令只能实现数据的单向绑定,从M绑定到V,无法实现双向绑定。
使用v-model指令,可以实现表单元素和Model中数据的双向绑定,并且v-model指令只能运用在表单元素中。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<h4>{{msg}}</h4>
<!-- v-bind只能实现数据的单向绑定,从M字段绑定到V,无法实现双向绑定-->
<!-- <input type="text" v-bind:value="msg"/> -->
<!-- 使用v-model指令,可以实现 表单元素和 Model中数据的双向绑定-->
<!-- v-model 只能运用在表单元素中-->
<input type="text" v-model="msg"/>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'大家都是好学生,爱敲代码,爱学习。'
},
methods:{
}
});
</script>
</html>
更多推荐
已为社区贡献15条内容
所有评论(0)