表单类型是网页很常见的呈现方式,表单元素有文字框<input>
、<textarea>
、<select>
...等,用v-model
的特性可以做到资料双向绑定的
功能,以下开始介绍。
input 文字框
<div id="demo">
<input type="text" v-model="message" placeholder="input text">
{{ message }}
</div>
const vm = Vue.createApp({
data() {
return {
message:'Hello Vue3',
}
}
});
vm.mount("#demo");
起手式在 input 加上 v-model="message" ,此时这输入框文字有变动时,data 的 message 也会更新。
textarea 文字方块
<div id="app">
<h2>{{ message }}</h2>
<textarea v-model="message"></textarea>
</div>
const vm = Vue.createApp({
data() {
return {
message:'hello Vue!',
}
}
}).mount('#app');
<textarea v-model="message"></textarea>
,不能再放{{ }}会无法同步
。
checked 选择框
<div id="demo">
<input type="checkbox" id="one" value="one" v-model="checked">
<label for="one">one</label>
<input type="checkbox" id="two" value="two" v-model="checked">
<label for="two">two</label>
<input type="checkbox" id="three" value="three" v-model="checked">
<label for="three">three</label>
<br>
<h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
data() {
return {
checked: [],
}
}
}).mount('#demo');
所有checked都要绑定一样的v-model="checked",且data一定要是阵列
,点击第二个checked,画面呈现:
checked 单选
<div id="demo">
<input type="checkbox" id="one" value="one" v-model="checked">
<label for="one">Click Me!</label>
<br>
<h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
data() {
return {
checked: false,
}
}
}).mount('#demo');
data 的 checked 改为 false
,预设就会没打勾,当点选 checked 会再转为 true
,改为打勾状态 。
radio 单选框
<div id="demo">
<input type="radio" id="one" value="1" v-model="checked">
<label for="one">one</label>
<input type="radio" id="two" value="2" v-model="checked">
<label for="two">two</label>
<input type="radio" id="three" value="3" v-model="checked">
<label for="three">three</label>
<br>
<h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
data() {
return {
checked: 1,
}
}
}).mount('#demo');
跟checked多选框
很相似,差别在於透过value
指定他的值,点选时data里的checked也同步更新为value的值:
select 下拉式选单
<div id="demo">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>北部</option>
<option>中部</option>
<option>南部</option>
</select>
<br>
<h3>selected:{{ selected }}</h3>
</div>
const vm = Vue.createApp({
data() {
return {
selected: '',
}
}
});
vm.mount('#demo');
v-model
必须放在 <select>
标签里,如果放在 <option>
标签 ,会导致画面虽然有更新,但 data
里的selected
根本没有更新,维持空字串的状态:
v-model 解析
大家现在都知道 v-model
是双向绑定,只要 input 输入什麽值, data
也会跟着更动,这都是靠ViewModel
同时帮我们处理 DOM 的监听和资料的绑动,v-model
是对功能没有影响,但更方便的使用,也就是语法糖
,那我们来还原他本来的写法:
<input :value="searchText" @input="searchText = $event.target.value">
input
绑定 value
属性後,在对 input
事件监听,触发的同时,$event.target.value
回传到 data
里的 searchText
属性。
methods
写法:
<div id="app">
<input :value="text" @input="input($event)">
<h1>{{ text }}</h1>
</div>
const vm = Vue.createApp({
data() {
return {
text: 'v-on,v-bind',
}
},
methods:{
input(event) {
this.text = event.target.value;
},
}
});
vm.mount('#app');
1.在 methods
宣告一个 input
监听。
2.当 @input
触发时 $event
(事件物件)传回 methods
的 input(event)。
3.event(原生事件).target(获取该触发事件的元素 button
).value再回传给 Data
的 text
。
>>: 连续 30 天 玩玩看 ProtoPie - Day 10
前言 Docker 的学习主要可分为容器操作及 Image 建置两部分,今天透过一些简单的 Lab ...
Azure Cosmos DB API for MongoDB- 找个地方放资料 MongoDB是一...
昨天跟朋友聊到中华电信,想说写篇文章来分析一下众多投资人喜爱的标的。 我後来跟大家询问一下,发现好多...
前文提到页是Innodb的基本存取单位,一般为16kb,Innodb为了实现功能其实设计了许多不同类...
线性搜寻法可以说是最容易理解的搜寻演算法了,相信大家都有过类似的经验,在图书馆里想在书架上找一本书...