使用 v-model
建立表单的双向资料绑定,ex: input
、textarea
、select
元素。对於不同的 input 类型,v-model
会有对应监听的属性和事件,例如....
类型 | 使用属性 | 监听事件 |
---|---|---|
text 和 textarea |
value |
input |
checkboxes 和 radiobuttons |
checked |
change |
select |
value |
change |
例如: text 或 textarea 会监听元素 value 的 input 事件
ex:
<!-- 单一文字框 -->
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
<!-- 文字方块 -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!-- 复选框 (绑定给同一个阵列)-->
<div id="v-model-multiple-checkboxes">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 单选框 -->
<div id="v-model-radiobutton">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
<!-- 下拉选项 -->
<div id="v-model-select" class="demo">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
v-model
修饰符 Modifiers.lazy
.number
.trim
使用 v-on
directive 监听 DOM 的事件,并执行相关的 function,例如: v-on:click="methodName"
也可缩写为 @click="methodName"
也可以有多个事件处理
ex:
<!-- both one() and two() will execute on button click -->
<button @click="one($event), two($event)">
Submit
</button>
// ...
methods: {
one(event) {
// first handler logic...
},
two(event) {
// second handler logic...
}
}
v-on
修饰符和 v-model
一样,事件的 v-on
也有修饰符可以使用。在处理事件时,很常使用 event.preventDefault()
或 event.stopPropagation()
,虽然可以把这些 DOM 事件相关的部分写入 methods
中,但尽可能 methods
单纯的包含资料逻辑就好。
.stop
阻挡事件冒泡.prevent
阻挡预设行为.capture
以捕获形式触发事件.self
只触发元素自己的事件.once
指定事件只触发一次.passive
执行预设行为ex:
<form v-on:submit.prevent="onSubmit">...</form>
.prevent
修饰符告诉v-on
这个 directive 在触发事件时,要去呼叫event.preventDefault()
<!-- click 事件只会被触发一次 -->
<a @click.once="doThis"></a>
passive
常用在手机装置的效能优化,每次事件发生,浏览器会去查询是否有 preventDefault
阻止此事件的预设行为;而使用 passive
是告诉浏览器,不用查了,我没使用 preventDefault 阻挡预设行为!
每日一句:
周休三日,恰到好处
<<: 【Day9】[资料结构]-杂凑表Hash Table
延续昨天的内容,我们 React.js 专案的基本设定都已经完成了,今天就要来实作 Navbar ...
开发必须的设备以及相关的设定 入门开发的几个必要条件:一台 Mac , 苹果帐号 ,以及一个一般人智...
有效的使用 Observability 的资料 系列文章 (1/4) - 透过 Machine Le...
「BIP BIP BIP 」 BIP 由於区块链没有一个中心系统,在协议上没有办法由中心统一更新, ...
1. Two Sum 我们挑选 LeetCode 中的 1. Two Sum 作为我们实作练习的第...