當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

v-bind单向绑定与v-model双向绑定

發(fā)布時間：2023/12/20 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 v-bind单向绑定与v-model双向绑定小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Vue.js 最顯著的特點(diǎn)就是響應(yīng)式和數(shù)據(jù)驅(qū)動，也就是將Model和View(View在下面的圖示中)進(jìn)行單向綁定或者雙向綁定。

Vue.js主要有三種數(shù)據(jù)綁定形式，并且都是基于單向綁定和雙向綁定。

1.插值形式? {{}}

2.單向綁定(v-bind)：把Model綁定到View，當(dāng)我們用JavaScript代碼更新Model時，View就會自動更新。因此，我們不需要進(jìn)行額外的DOM操作，只需要進(jìn)行Model的操作就可以實現(xiàn)視圖的聯(lián)動更新。

3.雙向綁定(v-model)：把Model綁定到View的同時也將View綁定到Model上，這樣就既可以通過更新Model來實現(xiàn)View的自動更新，也可以通過更新View來實現(xiàn)Model數(shù)據(jù)的更新。所以，當(dāng)我們用JavaScript代碼更新Model時，View就會自動更新，反之，如果用戶更新了View，Model的數(shù)據(jù)也自動被更新了。

弄清了它的這種數(shù)據(jù)綁定的機(jī)制，我們再來看Vue.js代碼就會很清晰了，

#-------------------------------------------{{}}------------------------------------------------------------------------------------

插值形式?
插值形式就是{{data}}的形式，它使用的是單向綁定。
我們首先定義好一個JavaScript對象作為Model，并且把這個Model的兩個屬性綁定到DOM節(jié)點(diǎn)上：

<body><div id="vm"><p>Hello, {{name}}!</p><p>You are {{age}} years old!</p></div></body> <script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',age: 18}});</script>

Vue實例就是ViewModel的代理對象：
el: 指定了要把Model綁定到id為vm的DOM節(jié)點(diǎn)上。
data: 指定了Model，我們初始化了Model的兩個屬性name和age，

在View內(nèi)部的<p>節(jié)點(diǎn)上，可以直接用{{ name }}引用Model的某個屬性。

扯白了,就是New Vue下面的就是模型,頁面上的<p></p>就是DOM節(jié)點(diǎn),就是View.

映射關(guān)系:

Model->View

修改Model,View就更新,這種綁定是單向綁定.

瀏覽器按下F12,

例如，打開瀏覽器console，

在控制臺輸入vm.name = 'Bob'，按下回車，可以觀察到頁面立刻發(fā)生了變化，原來的Hello, Robot!自動變成了Hello, Bob!。

運(yùn)行前:(按下F12,選擇右側(cè)的Console)

運(yùn)行后:

#-------------------------------------------------------------------------------------------------------------------------------

單向綁定(v-bind)

如果我們希望html的某些屬性能夠支持單向綁定，我們只需要在該屬性前面加上v-bind:指令，這樣Vue在解析的時候會識別出該指令，就會將該將其屬性的值跟Vue實例的Model進(jìn)行綁定。這樣我們就可以通過Model來動態(tài)的操作該屬性從而實現(xiàn)DOM的聯(lián)動更新。
例如：
<p class="classed">
上面<p>節(jié)點(diǎn)的class樣式指定的值為classed，它是一個靜態(tài)的屬性值，如果我們希望將該屬性值跟Model進(jìn)行一個綁定，只需要加上一個v-bind:指令，如下所示：
<p v-bind:class="classed">

綁定之后，classed不再是一個靜態(tài)的字符串，而是vue實例中的data.classed變量，也就是它跟Model的classed進(jìn)行了綁定，所以我們可以通過操作Model的classed來實現(xiàn)對View的class屬性的動態(tài)更新，從而實現(xiàn)View的動態(tài)更新。

這里為啥不再使用{{data}},因為綁定的是樣式,而不是具體的數(shù)值
?

<body><div id="vm"><p v-bind:class=classed>Hello, {{name}}!</p> <p class="{'blue':true}">Hello, {{name}}!</p> <p class=red>Hello, {{name}}!</p>    </div></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',classed: 'red'}});</script><style>/**/.red {background: red;}.blue {background: blue;}</style>

如上面代碼所示，vm.classed的初始值為red，此時<p>的樣式屬性對應(yīng)的是.red，此時背景就為紅色.

我們可以通過在瀏覽器的控制臺輸入vm.classed='blue'，此時背景就自動變成了藍(lán)色。

可以看到通過對class屬性進(jìn)行綁定我們就可以動態(tài)的改變class對應(yīng)的樣式，這個都是通過Model的操作完成的，沒有設(shè)置任何的DOM操作。

操作前:

操作后:

原理圖如下:

自己總結(jié):綁定的是"Model中的樣式對應(yīng)的變量"和"p節(jié)點(diǎn)"

#########################################################################

v-model形式

v-model主要是用在表單元素中，實現(xiàn)了雙向綁定。
當(dāng)用戶填寫表單時，View的狀態(tài)就被更新了，

如果此時Model的數(shù)據(jù)也會隨著輸入的數(shù)據(jù)動態(tài)的更新，

那就相當(dāng)于我們把Model和View做了雙向綁定。

這個意思是:View接受的數(shù)據(jù),傳給model,model的數(shù)據(jù)再傳給view.

代碼如下 :

<body><form id="vm" action="#"><p><input v-model="email"></p><p><input v-model="name"></p></form></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {email: '',name: ''}});</script>

修改console之前(View->Model):

修改console之后(Model->View):

我們可以在表單中輸入內(nèi)容，然后在瀏覽器console中用vm.$data查看Model的內(nèi)容，也可以用vm.name查看Model的name屬性，它的值和FORM表單對應(yīng)的<input>是一致的。

如果在瀏覽器console中用JavaScript更新Model，例如，執(zhí)行vm.name='Bob'，表單對應(yīng)的<input>內(nèi)容就會立刻更新。可以看到通過v-model實現(xiàn)了表單數(shù)據(jù)和Model數(shù)據(jù)的雙向綁定。

###################################################################################

下面是一個v-model的計算器的例子.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蜀云泉</title><script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head> <body><div id="app"><h3 v-text="msg"></h3><input type="text" style="width:100%" v-model="msg"><input type="text" v-model="num1"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="num2"><input type="button" value="=" @click="calc"><input type="text" v-model="result"></div><script>// 這個vm就是MVVM中的VM，ViewModelvar vm=new Vue({el: '#app',// 這個data就是MVVM中的M，Modeldata: {msg:"大家好，我是Vae",num1:0,num2:0,result:0,opt:'+'},//下面是加減乘除四種運(yùn)算methods: {calc(){switch(this.opt){//這里接收data中的opt的值case '+':this.result=parseInt(this.num1)+parseInt(this.num2);break;case '-':this.result=parseInt(this.num1)-parseInt(this.num2);break;case '*':this.result=parseInt(this.num1)*parseInt(this.num2);break;case '/':if(this.num2==0) {alert('除數(shù)不能為0');break;}this.result=parseInt(this.num1)/parseInt(this.num2);break;}}}})</script> </body> </html>

參考鏈接:

https://blog.csdn.net/u012207345/article/details/81737509

總結(jié)

以上是生活随笔為你收集整理的v-bind单向绑定与v-model双向绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： xfce4自己使用的主题设置备份以及xf
下一篇： TypeError: the JSON