Vue語法：數據的雙向綁定
1.指令v-model
- 使用v-model可以爲輸入元素創建數據雙向綁定，他會根據元素的類型自動選取正確的方法來更新元素。下面的代碼演示了單行文本框、多行文本框、單選按鈕，複選框以及下拉選擇框做了一個簡單的演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-model</title>
</head>
<body>
<div id="app">
<h3>1.單行文本框</h3>
<input type="text" v-model="singleText" style="width: 240px;">
<p>{{singleText}}</p>
<h3>2.多行文本框</h3>
<textarea v-model="multiText" style="width: 240px;"></textarea>
<p>{{multiText}}</p>
<h3>3.單選框</h3>
<!--由於點擊被選中的單選項無法取消其被選中的狀態，所以一般沒有使用單個選項的場景，設置v-model共用一個變量(radioValue)可以實現RadioGroup的效果-->
<input id="ra" type="radio" value="張三" v-model="radioValue">
<label for="ra">A.張三</label>
<input id="rb" type="radio" value="李四" v-model="radioValue">
<label for="rb">B.李四</label>
<p>{{radioValue}}</p>
<h3>4.單個複選框</h3>
<!--單個複選框被用於true和false的切換-->
<input id="c" type="checkbox" v-model="toggleValue">
<label for="c">噠噠噠</label>
<p>{{toggleValue}}</p>
<h3>5.多個複選框</h3>
<!--多個複選框，v-model接受數組類型的變量-->
<input id="ca" type="checkbox" value="AAA" v-model="checkedValues">
<label for="ca">AAAA</label>
<input id="cb" type="checkbox" value="BBB" v-model="checkedValues">
<label for="cb">BBBB</label>
<input id="cc" type="checkbox" value="CCC" v-model="checkedValues">
<label for="cc">CCCC</label>
<p>{{checkedValues.join(',')}}</p>
<h3>6.單項下拉選擇框</h3>
<select v-model="singleSelect">
<!--如果沒有設置value值，則option節點的文本值會被當做value值-->
<option value="zhangsan">張三</option>
<option >李四</option>
</select>
<p>{{singleSelect}}</p>
<h3>7.多項下拉選擇框</h3>
<select multiple v-modle="multiSelect">
<!--按住Ctrl，可執行多選-->
<option value=1>語文</option>
<option value=2>數學</option>
<option value=3>歷史</option>
<option :value="4">地理</option>
</select>
<p>{{multiSelect.join(',')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data(){
return{
singleText:'',
multiText:'',
radioValue:'',
toggleValue:false,
checkedValues:[],
singleSelect:'zhangsan',
multiSelect:[1,3]
}
},
methods:{
}
});
</script>
</body>
</html>
2.v-model與修飾符
| 修飾符 | 可用版本 | 說明 |
|---|---|---|
| .lazy | 所有 | 將用戶輸入的數據賦值於變量的時間有輸入時延遲到數據改變時 |
| .number | 所有 | 自動轉換用戶輸入爲數值類型 |
| .trim | 所有 | 自動過濾用戶輸入的首尾的空白字符 |
下面的代碼展示了trim和number的簡單用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model與修飾符</title>
</head>
<body>
<div id="app">
<input type="text" v-model.trim.number="text" @keyup="handleKeyUp">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:()=>({
text:''
}),
methods:{
handleKeyUp(event) {
console.log(this.text,typeof this.text)
}
}
});
</script>
</body>
</html>
3.v-model與自定義組件
在自定義組件中，value屬性和input事件尤爲重要，value屬性用於接收外部傳入的值以更新組件內部的狀態，input事件由開發者決定在什麼事件調用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model與修飾符</title>
</head>
<body>
<div id="app">
<!--自定義組件-->
<custom-screen v-model="text"></custom-screen><br>
<input type="text" v-model.trim.number="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
Vue.component('custom-screen',{
//使用value屬性接收外部傳入的值
props:['value'],
methods: {
handleReset(){
console.log('重置爲\'\'');
this.$emit('input','');//使用$emit發送input事件，並將目標值作爲參數傳出
}
},
template:'<div>\n' +
' <h2>輸入值爲：{{value}}</h2>\n' +
' <button @click="handleReset">重置爲空</button>\n' +
'</div>'
})
var app = new Vue({
el:'#app',
data:()=>({
text:''
}),
methods:{
}
});
</script>
</body>
</html>
小白一枚，如有問題，請多多指教😃