Vue事件处理及表单输入绑定
Posted 遥岑.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue事件处理及表单输入绑定相关的知识，希望对你有一定的参考价值。
目录
事件处理
例子
可以用v-on指令监听DOM事件，在触发时运行一些js代码。
<body>
<div id="app">
<button v-on:click="counter+=1">add</button>
<p>counter</p>
</div>
</body>
<script>
var vm = new Vue(
el:'#app',
data:
counter:0
)
</script>
许多事件处理逻辑比较复杂，不能直接将js代码写在v-on指令中，因此v-on还可以接受一个需要调用的方法名称。
<body>
<div id="app">
<button v-on:click="greet">11</button>
</div>
</body>
<script>
var vm = new Vue(
el:'#app',
data:
name:'yc'
,
methods:
greet:function(event)
console.log(this.name)
if(event)
console.log(event.target.tagName)
)
</script>
也可以在内联js语句中调用方法。
如果需要在内联语句处理器中访问原始的DOM事件，可以用特殊变量$event将他传入方法。
<body>
<div id="app">
<button v-on:click="warn('yet',$event)">submit</button>
</div>
</body>
<script>
new Vue(
el:'#app',
methods:
warn:function(message,event)
if(event)
console.log(event)
event.preventDefault()
console.log(message)
)
</script>
事件修饰符
在事件处理程序中调用event.preventDefault或event.stopPropagation是非常常见的，为了使方法只有数据逻辑，而不是处理DOM事件细节，vue提供了事件修饰符。
使用修饰符要注意顺序。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
表单输入绑定
v-model可以用来创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，它本质上是一个语法糖，负责监听用户的输入事件来更新数据，并对一些极端场景进行特殊处理。
v-model忽略所有表单元素的value、checked、selected的属性值而把vue实例的数据作为数据来源，可以在js的data中声明初始值。
例子
- 文本
<body>
<div id="app">
<input v-model="message" placeholder="输入">
<p>message</p>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
message:''
)
</script>
- 多行文本
<body>
<div id="app">
<p>message</p>
<textarea v-model="message" placeholder="add"></textarea>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
message:''
)
</script>
在文本区域textarea插值不会生效，可以用v-model代替
- 复选框
<body>
<div id="app">
<input type="checkbox" id="jack" value="jack" v-model="checkNames">
<label for="jack">jack</label>
<input type="checkbox" id="mary" value="mary" v-model="checkNames">
<label for="jack">mary</label>
<input type="checkbox" id="summer" value="summer" v-model="checkNames">
<label for="jack">summer</label>
<br>
<span>checkNames</span>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
checkNames:[]
)
</script>
- 单选按钮
<body>
<div id="app">
<input type="radio" id="one" value="one" v-model="pick">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="pick">
<label for="two">two</label>
<br>
<span>pick</span>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
pick:''
)
</script>
- 选择框
<body>
<div id="app">
<select v-model="select">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>select</span>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
select:''
)
</script>
<body>
<div id="app">
<select v-model="select" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>select</span>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
//多选时绑定到一个数组上
select:[]
)
</script>
v-for渲染动态选项
<body>
<div id="app">
<select v-model="select">
<option v-for="option in options" v-bind:value="option.value">
option.text
</option>
</select>
<span>select</span>
</div>
</body>
<script>
new Vue(
el:'#app',
data:
select:'',
options:[
text:'One',value:'A',
text:'Two',value:'B',
text:'Three',value:'C'
]
)
</script>
修饰符
- .lazy
默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符，从而转在change事件之后进行同步。
<input v-model.lazy='msg'>
- .number
可以将用户的输入值转为数值类型。
即使在type='number’时，html输入元素的值也总会返回字符串，如果不能被parseFloat解析，会返回原始的值。
<input v-model.number='age' type='number'>
- .trim
自动过滤用户输入的首尾空白字符。
<input v-model.trim='msg'>
以上是关于Vue事件处理及表单输入绑定的主要内容，如果未能解决你的问题，请参考以下文章