数据的单向绑定v-bind
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-bind:value="msg">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
// 创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
msg: '爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!',
},
methods: {}
});
</script>
数据的单向绑定就是说当我该变vue的数据的时候,视图层的样式也会改变，这是单向的
demo01
v-bind-01.PNG
demo02
v-bind-02.PNG
demo03
在input表单里面输入'肥肥肥',看看vm中的msg的值会不会改变,不改变页面的数据就不能同步到vue中
v-bind-03.PNG
思考为什么要进行数据的双向绑定?或者什么时候需要数据的双向绑定？
当用在输入的时候,修改了表单的值的时候
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model:value="msg">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
// 创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
msg: '爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!',
},
methods: {}
});
</script>
demo04
v-model-01.PNG
demo05
v-model-02.PNG
