v-model的修飾符缔赠,主要用于控制數(shù)據(jù)同步的時(shí)機(jī)。
使用.lazy修飾符v-model會(huì)在change事件中同步褂微。這時(shí)功蜓,message并不是實(shí)時(shí)改變的,而是在失焦或按回車時(shí)才更新宠蚂。
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue穩(wěn)定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--v-model修飾符-->
<div id="app">
<!--input單選按鈕:
式撼。
v-model的關(guān)鍵點(diǎn):
1.v-model使用的是vue實(shí)例的數(shù)據(jù)
2.v-model能夠監(jiān)聽(tīng)用戶輸入事件,從而更新v-model所對(duì)應(yīng)的vue實(shí)例的數(shù)據(jù)
-->
<input type="text" v-model.lazy="message" placeholder="請(qǐng)輸入..."/>
<br>
<span>當(dāng)前輸入的值: {{message}}</span>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message: ''
},
methods:{
getInputValue: function (param) {
console.info(param)
alert("獲取到的單選框的值是: "+param);
}
}
});
</script>
</body>
</html>
運(yùn)行結(jié)果:
運(yùn)行結(jié)果