Vue v-model實現(xiàn)案例介紹

更新時間：2022年09月08日 17:10:05 作者：月光曬了很涼快

v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值

1. 概述

v-model 是 Vue 提供的一個語法糖，它是 value 值和事件的結(jié)合體，它會根據(jù)不同的表單項，來選擇執(zhí)行不同的事件。它的作用是，通過和表單元素綁定，實現(xiàn)雙向數(shù)據(jù)綁定，通過表單項可以更改數(shù)據(jù)。

另外，v-model 還可以用于各種不同類型的輸入，<textarea>、<select> 元素。它會根據(jù)所使用的元素自動使用對應(yīng)的 DOM 屬性和事件組合：

文本類型的 <input> 和 <textarea> 元素會綁定 value property 并偵聽 input 事件；
<input type="checkbox"> 和 <input type="radio"> 會綁定 checked property 并偵聽 change 事件；
<select> 會綁定 value property 并偵聽 change 事件

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值，而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源，應(yīng)該在 data 選項中聲明初始值。

語法糖：這種語法對語言的功能并沒有影響，但是更方便程序員使用

2. 使用方法

在沒有使用v-model指令時，我們通過data數(shù)據(jù)控制表單項中的值，還是麻煩的，需要綁定屬性和事件來完成。

<div id="app">
    <div>
        <input type="text" :value="username" @input="setUsername">
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            setUsername(evt) {
                this.username = evt.target.value.trim()
            }
        }
    })
</script>

使用 v-model 指令實現(xiàn)上述效果：

<div id="app">
    <div>
        <input type="text" v-model="username">
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: ''
        }
    })
</script>

3. 案例

3.1 用戶登錄

使用 v-model 指令，可以很輕松的獲取表單中的數(shù)據(jù)，也可以很輕松地對數(shù)據(jù)進行修改。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <label>
                    賬號：
                    <input type="text" v-model="username">
                </label>
            </div>
            <div>
                <label>
                    密碼：
                    <input type="text" v-model="password">
                </label>
            </div>
            <div>
                <textarea v-model="intro"></textarea>
            </div>
            <div>
                <button @click="dologin">登錄系統(tǒng)</button>
            </div>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    username: '',
                    password: '',
                    intro: 'hahaha'
                },
                methods: {
                    dologin() {
                        console.log(this.username, this.password, this.intro);
                    }
                }
            })
        </script>
    </body>
</html>

注意：多行文本框中使用插值表達式無效

3.2 todolist

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input placeholder="請輸入內(nèi)容" type="text" v-model="title" @keyup.enter="onEnter">
            <hr>
            <ul>
                <!-- 條件渲染 -->
                <li v-if="todos.length===0">無任務(wù)</li>
                <li v-else v-for="item,index in todos" :key="item.id">
                    <span>{{item.title}}</span>
                    <span @click="del(index)">刪除</span>
                </li>
            </ul>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    todos: [],
                    title: ''
                },
                methods: {
                    onEnter() {
                        this.todos.push({
                            id: Date.now(),
                            title: this.title
                        })
                        this.title = ''
                    },
                    del(index) {
                        // 刪除 它可以使用 vue中提供的變異方法splice來完成，用此方法它會觸發(fā)視圖更新
                        this.todos.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>

3.3 實現(xiàn)單個復(fù)選框

當單個復(fù)選框被選中或者被取消選中時，我們?nèi)绾潍@取到該復(fù)選框是否被選中的信息？

我們可以通過綁定事件來獲?。?/p>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <div>
                <!-- click事件可以用，但它是的狀態(tài)會太過提前，用onchange事件，改變后來獲取 -->
                <input type="checkbox" @click="clickFn">
                <input type="checkbox" @change="clickFn">
            </div>
        </div>
        <!-- 第3步：實例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    // 單個復(fù)選框一定要用布爾類型
                    checked: false
                },
                methods: {
                    clickFn(evt) {
                        console.log(evt.target.checked);
                    }
                }
            })
        </script>
    </body>
</html>

注意：在綁定事件時，click事件可以用，但它是的狀態(tài)會太過提前，所以用onchange事件，改變后再來獲取。

更簡單的方式是，通過 v-model 指令來獲?。?/p>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <div>
                <!-- 單個復(fù)選框，在數(shù)據(jù)源中定義的數(shù)據(jù)類型為布爾類型 true選中，false未選中 -->
                <input type="checkbox" v-model="checked">
            </div>
        </div>
        <!-- 第3步：實例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    // 單個復(fù)選框一定要用布爾類型
                    checked: false
                },
                methods: {

                }
            })
        </script>
    </body>
</html>

注意：單個復(fù)選框，在數(shù)據(jù)源中定義的數(shù)據(jù)類型為布爾類型：true 選中，false未選中

3.4 實現(xiàn)多個復(fù)選框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue學(xué)習(xí)使用</title>
  <!-- 第1步： 引入vue庫文件 -->
  <script src="./js/vue.js"></script>
</head>
<body>
  <!-- 第2步：掛載點 -->
  <div id="app">
    <div>
      <!-- 
      -->
      <ul>
        <li>
          <input type="checkbox" value="html" v-model="lessons">html
        </li>
        <li>
          <input type="checkbox" value="css" v-model="lessons">css
        </li>
        <li>
          <input type="checkbox" value="js" v-model="lessons">js
        </li>
      </ul>
      <hr>
      <div>{{lessons}}</div>
    </div>
  </div>
  <!-- 第3步：實例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 默認選中
        lessons: ["js",'css']
      },
      methods: {
      }
    })
  </script>
</body>
</html>

注意：多個復(fù)選框，數(shù)據(jù)源中定義的數(shù)據(jù)類型為數(shù)組，標簽中需要指定它的value值。

3.5 實現(xiàn)復(fù)選框全選

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <div>
                <input type="checkbox" v-model="checked" @change="onSelected">
                <hr>
                <ul>
                    <li>
                        <input type="checkbox" value="html" @change="selectlesson" v-model="lessons">html
                    </li>
                    <li>
                        <input type="checkbox" value="css" @change="selectlesson" v-model="lessons">css
                    </li>
                    <li>
                        <input type="checkbox" value="js" @change="selectlesson" v-model="lessons">js
                    </li>
                </ul>
                <hr>
                <div>{{lessons}}</div>
            </div>
        </div>
        <!-- 第3步：實例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    lessons: [],
                    checked: false
                },
                methods: {
                    onSelected(evt) {
                        // 選中了
                        if (evt.target.checked) {
                            this.lessons = ["js", 'html', 'css']
                        } else {
                            this.lessons = []
                        }
                    },
                    selectlesson() {
                        // 只要來操作數(shù)據(jù)源就可以改變視圖
                        this.checked = this.lessons.length == 3
                    }
                }
            })
        </script>
    </body>
</html>

3.6 單選和下拉

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <div>
                <h3>{{sex}} -- {{city}}</h3>
                <!-- 定義的數(shù)據(jù)類型為字符串 -->
                <label>
                    <input type="radio" value="先生" v-model="sex">建行
                </label>
                <label>
                    <input type="radio" value="女神" v-model="sex">招行
                </label>
            </div>
            <hr>
            <div>
                <select v-model="city">
                    <option value="0">==選擇==</option>
                    <option value="wh">蕪湖</option>
                    <option value="bj">北京</option>
                </select>
            </div>
        </div>
        <!-- 第3步：實例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    sex: '先生',
                    city: '0'
                }
            })
        </script>
    </body>
</html>

注意：單選框和復(fù)選框都需要 input 標簽提供 value 屬性。

4. v-model修飾符

4.1 lazy

作用：延時更新數(shù)據(jù)源中的數(shù)據(jù)，失去焦點時觸發(fā)更新。

<div id="app">
    <!-- v-model修飾符 -->
    <!-- 延時更新數(shù)據(jù)源中的數(shù)據(jù) 光標移開才會改變數(shù)據(jù) -->
    <input v-model.lazy="title">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    })
</script>

4.2 trim

作用：自動過濾用戶輸入的首尾空白字符。

<div id="app">
    <!-- 去空格 trim -->
    <input v-model.trim="title">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    })
</script>

4.3 number

作用：輸入值轉(zhuǎn)為數(shù)值類型。

<div id="app">
    <!-- 轉(zhuǎn)為數(shù)值 number -->
    <input type="number" v-model.number="n1">
    +
    <input type="number" v-model.number="n2">
    = {{n1+n2}}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2
        }
    })
</script>

5. 案例

5.1 購物車

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <table border="1" width="600">
                <tr>
                    <th>序號</th>
                    <th>名稱</th>
                    <th>單價</th>
                    <th>數(shù)量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">刪除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合計：
                {{totalPrice()}}
            </h3>

        </div>
        <!-- 第3步：實例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    carts: [
                        { id: 1, name: '小米12pro', price: 1, num: 1 },
                        { id: 2, name: '華為手機', price: 2, num: 1 },
                        { id: 3, name: '水果手機', price: 3, num: 1 },
                    ]
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        if (this.carts[index].num <= 1) this.carts[index].num = 1
                        if (this.carts[index].num >= 3) this.carts[index].num = 3
                        // 用最大值和最小值來限制它的范圍，可以了解一下這種寫法
                        // this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                    },
                    totalPrice() {
                        // 聚合運算
                        return this.carts.reduce((prev, { price, num }) => {
                            prev += price * num
                            return prev
                        }, 0)
                    },
                    del(index) {
                        // 彈出確認框
                        confirm('確定刪除') && this.carts.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>

5.2 購物車持久化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue學(xué)習(xí)使用</title>
        <!-- 第1步： 引入vue庫文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：掛載點 -->
        <div id="app">
            <table border="1" width="600">
                <tr>
                    <th>序號</th>
                    <th>名稱</th>
                    <th>單價</th>
                    <th>數(shù)量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <!-- <button @click="setNum(-1,item)">---</button> -->
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">刪除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合計：
                {{totalPrice()}}
            </h3>
        </div>
        <!-- 第3步：實例化vue -->
        <script>
            // 初始數(shù)據(jù)應(yīng)該從本地存儲中讀取
            function getCarts() {
                return !window.localStorage.getItem('carts') ? [{ id: 1, name: '小米12pro', price: 1, num: 1 },
                                                                { id: 2, name: '華為手機', price: 2, num: 1 },
                                                                { id: 3, name: '水果手機', price: 3, num: 1 }] : JSON.parse(window.localStorage.getItem('carts'))
            }
            function setCarts(carts) {
                window.localStorage.setItem('carts', JSON.stringify(carts))
            }
            const vm = new Vue({
                el: '#app',
                data: {
                    carts: getCarts()
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        if (this.carts[index].num <= 1) this.carts[index].num = 1
                        if (this.carts[index].num >= 3) this.carts[index].num = 3
                        // 用最大值和最小值來限制它的范圍，可以了解一下
                        // this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                        setCarts(this.carts)
                    },
                    totalPrice() {
                        return this.carts.reduce((prev, { price, num }) => {
                            prev += price * num
                            return prev
                        }, 0)
                    },
                    del(index) {
                        if(confirm('確定刪除')){
                            this.carts.splice(index, 1)
                            setCarts(this.carts)
                        }
                    }
                }
            })
        </script>
    </body>
</html>