vue.js為開(kāi)發(fā)者提供了很多便利的指令，其中v-model用于表單的數(shù)據(jù)綁定很常見(jiàn)，

下面是最常見(jiàn)的例子：

<div id='myApp'>
  <input type="text" v-model="msg"><br>
  {{msg}}
 </div>

js里data初始化數(shù)據(jù)

<script src="./js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#myApp",
            data() {
                return {
                    msg:'hello'
                }
            },

瀏覽器渲染：

上面可知，v-model對(duì)應(yīng)的數(shù)據(jù)為input的value屬性

但是如果是checkbox，會(huì)有一點(diǎn)問(wèn)題

<div id='myApp'>
  <input type="checkbox" v-model="msg"><br>
  {{msg}}
 </div>

沒(méi)有給checkbox設(shè)置value屬性

js中data為''：

new Vue({
      el: "#myApp",
      data() {
        return {
          msg:''
        }
      },

瀏覽器渲染：

勾選為true，取消勾選為false    

且data中msg如果初始化為true，則checkbox默認(rèn)選中          

到這里讓人會(huì)有在checkbox里，v-model對(duì)應(yīng)的值為true或false，似乎和checked屬性有關(guān)

是不是這樣呢，我們?cè)賮?lái)看一個(gè)例子：

<div id='myApp'>
   <input type="checkbox" v-model="msg" value="angular">angular<br>
   <input type="checkbox" v-model="msg" value="react">react<br>
   <input type="checkbox" v-model="msg" value="vue">vue<br>
   {{msg}}
 </div>

我們?cè)O(shè)置三個(gè)checkbox，分別設(shè)置value屬性

js中依然

new Vue({
      el: "#myApp",
      data() {
        return {
          msg:''
        }
      },

瀏覽器：

可以看到有了value屬性，v-model 對(duì)應(yīng)的msg 依然是true或false；

那么之前的猜想難道是正確的嗎？

我們來(lái)改一點(diǎn)代碼，通常v-model對(duì)應(yīng)的都是字符串，這次我們初始化為空數(shù)組[]

 data() {
    return {
     msg:[]
    }
  },

其他的不變，依然是上面三個(gè)checkbox

神奇的一幕出來(lái)了

瀏覽器中：

可以看到，選中誰(shuí)，誰(shuí)的value就會(huì)添加到數(shù)組里，

且數(shù)據(jù)是雙向綁定的，所以，當(dāng)我們初始化數(shù)據(jù)的數(shù)組里賦予上面的value值時(shí)，所對(duì)應(yīng)的checkbox便會(huì)默認(rèn)選中

data() {    return {      msg:['vue']    }  },

瀏覽器渲染：

所以可以看到，checkbox里v-model對(duì)應(yīng)的值依然是value，但是之前為什么是true或false？

我自己在網(wǎng)上找了很久，沒(méi)有發(fā)現(xiàn)一個(gè)特別清楚的解釋，所以在這里發(fā)表一下自己的理解：

1.checkbox和普通input一樣，點(diǎn)擊勾選其實(shí)就是輸入value,而輸入value會(huì)改變checked屬性,所以會(huì)選中 當(dāng)v-model對(duì)應(yīng)“字符串”時(shí)會(huì)解析“字符串”為布爾值，v-model對(duì)應(yīng)有值或是true，checkbox都會(huì)選中。

2.當(dāng)v-model對(duì)應(yīng)“數(shù)組”時(shí)有勾表示已選中，相當(dāng)于賦值給，相當(dāng)于有value，v-model對(duì)應(yīng)value,       沒(méi)有value屬性時(shí)，點(diǎn)勾相當(dāng)于將('null')賦值給value——>v-model('null'為字符串),      有value屬性時(shí)，點(diǎn)勾相當(dāng)于將(value)賦值給value——>v-model，      注意數(shù)據(jù)是雙向綁定的，所以數(shù)組里的值對(duì)應(yīng)著checkbox的value——>v-model。

3.處理表單，v-model一般都是對(duì)應(yīng)字符串，所以處理checkbox的v-model，善用對(duì)應(yīng)布爾值控制勾選。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論