文章目錄
- 前言
- v-model.lazy 延遲同步
- v-model.trim 去掉空格
前言
v-model指令是Vue.js中實現雙向數據綁定的一種重要機制。它可以將表單控件的值與Vue.js實例中的數據進行雙向綁定，即當表單控件的值發生變化時，Vue.js實例中的數據也會隨之更新，反之亦然。
在使用v-model指令時，需要將其綁定到一個Vue.js實例中的數據上，例如：
<input v-model="message">
看到 input 輸入框，后面就要跟上v-model
看到 button 按鈕，后面就要跟上@click
在上述代碼中，v-model指令被綁定到了Vue.js實例中的message數據上
當輸入框的值發生變化時，v-model指令會自動將新的值更新到message數據中，實現了雙向數據綁定。
需要注意的是，v-model指令只能用于表單控件，如<input>、<textarea>和<select>等。對于其他自定義組件，需要通過使用props和自定義事件來實現類似的雙向數據綁定機制。
v-model.lazy 延遲同步
用于將表單元素的值與 Vue 實例的數據綁定。
.lazy 修飾符將輸入事件轉換為變更事件, 只有在元素失去焦點或用戶按下回車鍵時，才會更新數據，從而實現了延遲同步的效果。
這種方式可以避免不必要的更新，并且可以優化性能。
【代碼示例1】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">延遲同步 <input type="text" v-model.lazy="data1">{{data1}}</div>
</body>
<script src="../js/vue3.js"></script>
<script>let vm = Vue.createApp({data() {return {data1: ''}},})vm.mount('#app')
</script>
</html>
【代碼示例2】
<template><div><input v-model.lazy="username" type="text" placeholder="Enter username" /><p>Username: {{ username }}</p></div>
</template><script>
export default {data() {return {username: '',};},
};
</script>
當用戶在輸入框中輸入數據時，v-model.lazy指令告訴Vue不要立即同步輸入的值到組件的data屬性上。相反，它會等到用戶離開輸入框時，才會同步數據。
具體而言，當用戶在輸入框中輸入數據時，Vue會將這些輸入緩存起來，并在blur事件（即用戶離開輸入框）發生時，才將緩存中的數據同步到組件的data屬性上。
在上面的示例中，當用戶在輸入框中輸入用戶名時，v-model.lazy="username"指定將輸入的值綁定到組件實例的username屬性上。當用戶離開輸入框時，組件的data屬性中的username值將被更新，并在模板中使用插值語法{{ username }}顯示。
v-model.trim 去掉空格
v-model.trim 是 Vue.js 提供的一個修飾符，用于將表單輸入框中輸入的內容去掉首尾空格。
在使用 v-model 綁定表單輸入框的值時，可以在 v-model 后面加上 .trim，例如：
<input type="text" v-model.trim="message">
這樣在輸入內容時，如果輸入內容前后存在空格，則會自動去掉空格后綁定到 message 變量中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">去掉空格 <input type="text" v-model.trim="data2"> <button @click="check">驗證</button></div>
</body>
<script src="../js/vue3.js"></script>
<script>let vm = Vue.createApp({data() {return {data2: ''}},methods: {check(){console.log( this.data2.length );}},})vm.mount('#app')
</script>
</html>
)
