vue_v-model指令的基本用法
2019-05-20 本文已影响0人
大风过岗
语法格式
语法格式：
v-model="vue_instance_attr"
//value会自动把输入值赋值给vue实例的attr字段。
使用示例
<!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>
<!--input输入框-->
<div id="app">
<input type="text" v-model="message" placeholder="请输入">
<p>输入的内容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
}
});
</script>
</body>
</html>
运行结果：
v-model基本使用
如何理解v-model指令
v-model指令的本质是： 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。 然后当输入事件发生时，实时更新vue实例中的数据。
实现原理
<input v-bind:value="message" v-on:input="message = $event.target.value" /> //把input输入框的value属性值和vue实例的message属性进行绑定，同时监听输入事件。
用v-bind和v-on指令实现v-model
<!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>
<!--input输入框-->
<div id="app">
<!--把message字段的值作为input标签的value属性值，同时监听输入事件，实时更新message的值-->
<input type="text" @input="handleInput($event)" placeholder="请输入" v-bind:value="message">
<p>输入的内容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
},
methods:{
handleInput: function (event) {
console.info("控制台打印event详情")
console.info(event)
console.info(event.toLocaleString());
this.message=event.target.value;
}
}
});
</script>
</body>
</html>
运行结果：
v-bind和v-on实现v-model指令
