v-model的修饰符,主要用于控制数据同步的时机。
使用.lazy修饰符v-model会在change事件中同步。这时,message并不是实时改变的,而是在失焦或按回车时才更新。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<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的关键点:
1.v-model使用的是vue实例的数据
2.v-model能够监听用户输入事件,从而更新v-model所对应的vue实例的数据
-->
<input type="text" v-model.lazy="message" placeholder="请输入..."/>
<br>
<span>当前输入的值: {{message}}</span>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message: ''
},
methods:{
getInputValue: function (param) {
console.info(param)
alert("获取到的单选框的值是: "+param);
}
}
});
</script>
</body>
</html>
运行结果:
运行结果