欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談vue中關于checkbox數據綁定v-model指令的個人理解

 更新時間:2018年11月14日 08:29:12   作者:haidizhixin121  
這篇文章主要介紹了淺談vue中關于checkbox數據綁定v-model指令的個人理解,v-model用于表單的數據綁定很常見,下面就來詳細的介紹一下

vue.js為開發(fā)者提供了很多便利的指令,其中v-model用于表單的數據綁定很常見,

下面是最常見的例子:

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

js里data初始化數據

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

瀏覽器渲染:

    

上面可知,v-model對應的數據為input的value屬性

但是如果是checkbox,會有一點問題

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

沒有給checkbox設置value屬性

js中data為'':

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

瀏覽器渲染:

          

勾選為true,取消勾選為false    

且data中msg如果初始化為true,則checkbox默認選中          

到這里讓人會有在checkbox里,v-model對應的值為true或false,似乎和checked屬性有關

是不是這樣呢,我們再來看一個例子:

<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>

我們設置三個checkbox,分別設置value屬性

js中依然

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

瀏覽器:

               

可以看到有了value屬性,v-model 對應的msg 依然是true或false;

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

我們來改一點代碼,通常v-model對應的都是字符串,這次我們初始化為空數組[]

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

其他的不變,依然是上面三個checkbox

神奇的一幕出來了

瀏覽器中:

可以看到,選中誰,誰的value就會添加到數組里,

且數據是雙向綁定的,所以,當我們初始化數據的數組里賦予上面的value值時,所對應的checkbox便會默認選中

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

瀏覽器渲染:

 

所以可以看到,checkbox里v-model對應的值依然是value,但是之前為什么是true或false?

我自己在網上找了很久,沒有發(fā)現一個特別清楚的解釋,所以在這里發(fā)表一下自己的理解:

1.checkbox和普通input一樣,點擊勾選其實就是輸入value,而輸入value會改變checked屬性,所以會選中 當v-model對應“字符串”時會解析“字符串”為布爾值,v-model對應有值或是true,checkbox都會選中。

2.當v-model對應“數組”時有勾表示已選中,相當于賦值給,相當于有value,v-model對應value,       沒有value屬性時,點勾相當于將('null')賦值給value——>v-model('null'為字符串),      有value屬性時,點勾相當于將(value)賦值給value——>v-model,      注意數據是雙向綁定的,所以數組里的值對應著checkbox的value——>v-model。

3.處理表單,v-model一般都是對應字符串,所以處理checkbox的v-model,善用對應布爾值控制勾選。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 解決VUE打包后與nginx代理出現加載速度超級慢的問題

    解決VUE打包后與nginx代理出現加載速度超級慢的問題

    這篇文章主要介紹了解決VUE打包后與nginx代理出現加載速度超級慢的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • 淺析Proxy如何實現Vue響應式

    淺析Proxy如何實現Vue響應式

    這篇文章主要是來和大家探討一下,Vue的響應式系統僅僅是一個Proxy嗎,本文將圍繞此問題探索一下Proxy是如何實現Vue響應式的,感興趣的小伙伴可以了解一下
    2023-08-08
  • vue如何通過事件的形式調用全局組件

    vue如何通過事件的形式調用全局組件

    這篇文章主要介紹了vue如何通過事件的形式調用全局組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-09-09
  • vue跨域解決方法

    vue跨域解決方法

    這篇文章主要介紹了vue跨域解決方法 ,需要的朋友可以參考下
    2017-10-10
  • vue-cli腳手架引入圖片的幾種方法總結

    vue-cli腳手架引入圖片的幾種方法總結

    下面小編就為大家分享一篇vue-cli腳手架引入圖片的幾種方法總結,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • element-ui中Table表格省市區(qū)合并單元格的方法實現

    element-ui中Table表格省市區(qū)合并單元格的方法實現

    這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • 基于Vue2的移動端開發(fā)環(huán)境搭建詳解

    基于Vue2的移動端開發(fā)環(huán)境搭建詳解

    這篇文章主要給大家介紹的是基于Vue2的移動端環(huán)境搭建,移動端大家更多想到的是響應布局,我們根據不同大小的屏幕進行適配,當然少不了我們的重頭戲rem,移動端相比pc端就沒什么特別的了。我會一步一步帶領大家進入Vue2的世界,感興趣的朋友下面來一起學習學習吧。
    2016-11-11
  • vue中的base64圖片轉網絡URL方式

    vue中的base64圖片轉網絡URL方式

    在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉換為Blob URL,進而轉換為File對象,并可進一步轉換為PNG或其他格式的圖片,這種轉換技術在前端開發(fā)中非常實用
    2024-10-10
  • Vue3框架使用報錯以及解決方案

    Vue3框架使用報錯以及解決方案

    這篇文章主要介紹了Vue3框架使用報錯以及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue.js根據圖片url進行圖片下載

    vue.js根據圖片url進行圖片下載

    最近在做一個前端vue.js對接的功能模塊時,需要實現一個下載圖片的功能,本文就介紹了vue.js根據圖片url進行圖片下載,感興趣的可以了解一下
    2021-06-06

最新評論