數(shù)據(jù)的單向綁定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>
// 創(chuàng)建一個(gè)vue實(shí)例
var vm = new Vue({
el: '#app',
data: {
msg: '愛(ài)敲代碼,愛(ài)學(xué)習(xí),愛(ài)思考,簡(jiǎn)直是完美,沒(méi)瑕疵!',
},
methods: {}
});
</script>
數(shù)據(jù)的單向綁定就是說(shuō)當(dāng)我該變vue的數(shù)據(jù)的時(shí)候,視圖層的樣式也會(huì)改變鹉究，這是單向的
demo01
v-bind-01.PNG
demo02
v-bind-02.PNG
demo03
在input表單里面輸入'肥肥肥',看看vm中的msg的值會(huì)不會(huì)改變,不改變頁(yè)面的數(shù)據(jù)就不能同步到vue中
v-bind-03.PNG
思考為什么要進(jìn)行數(shù)據(jù)的雙向綁定?或者什么時(shí)候需要數(shù)據(jù)的雙向綁定容握？
當(dāng)用在輸入的時(shí)候,修改了表單的值的時(shí)候
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model:value="msg">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
// 創(chuàng)建一個(gè)vue實(shí)例
var vm = new Vue({
el: '#app',
data: {
msg: '愛(ài)敲代碼,愛(ài)學(xué)習(xí),愛(ài)思考,簡(jiǎn)直是完美,沒(méi)瑕疵!',
},
methods: {}
});
</script>
demo04
v-model-01.PNG
demo05
v-model-02.PNG
