表单元素
文本框 text：
文本框可以加个 v-model 属性，绑定 content，在修改文本框的时候也会自动修改 content，这叫做双向绑定。
1
| <input type="text" v-model="content" />
|
1
2
3
4
5
| data() {
return {
content: '天地玄黄'
};
},
|
多行文本 textarea：
也可以绑定 v-model
1
| <textarea v-model="content" placeholder="写点东西"></textarea>
|
复选框 checkbox：
在点击的时候切换状态
1
2
| <input type="checkbox" v-model="checked" />
<label > checked:{{ checked }} </label>
|
1
2
3
4
5
| data() {
return {
checked: true
};
},
|
如果想点击标签也可以切换的话：
1
2
| <input id="check" type="checkbox" v-model="checked" />
<label for="check"> checked:{{ checked }} </label>
|
多值复选框 checkbox
多个复选框都绑定一个 tags，在选中时，会将 input 的 value 属性的值添加到 tags 里。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <label for="tag-1">
<input id="tag-1" type="checkbox" value="大明湖" v-model="tags" />
大明湖</label
>
<label for="tag-2">
<input id="tag-2" type="checkbox" value="黑虎泉" v-model="tags" />
黑虎泉</label
>
<label for="tag-3">
<input id="tag-3" type="checkbox" value="趵突泉" v-model="tags" />
趵突泉</label
>
<span>tags:{{ tags }}</span>
|
1
2
3
4
5
| data() {
return {
tags: [],
};
},
|
单选按钮 radio：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <label for="subscription-annual">
<input
id="subscription-annual"
type="radio"
value="annual"
v-model="subscription"
/>
一年
</label>
<label for="subscription-quarterly">
<input
id="subscription-quarterly"
type="radio"
value="quarterly"
v-model="subscription"
/>
季度
</label>
<span>subscription:{{ subscription }}</span>
|
1
2
3
4
5
| data() {
return {
subscription: 'annual',
};
},
|
subscription 的值会根据选中的单选框的 value 变化，设置默认选中可以修改 data 中 subscription 的值。
选择列表 select
在选择的时候会动态改变 category 的值，将它修改为 option 的 value 的值。
1
2
3
4
5
6
7
| <select v-model="category">
<option value=""> - 选择分类 - </option>
<option value="development">应用开发</option>
<option value="game">游戏开发</option>
</select>
<span>category:{{ category }}</span>
|
1
2
3
4
5
| data() {
return {
category: '',
};
},
|
事件
input 事件：元素值变化时发生的事件
1
| <input type="text" @input="onInputContent" />
|
1
2
3
4
5
| methods: {
onInputContent(event) {
console.log(event);
}
},
|
change 事件：用户提交修改元素值时发生的事件，只有确定了或者提交了后才能触发
1
| <input type="text" @change="onChangeContent" />
|
1
2
3
4
5
| methods: {
onChangeContent(event) {
console.log(event.target.value);
},
}
|
keyup 事件：按下并抬起键盘按键时发生的事件
1
| <input type="text" @keyup="onKeyupInput" />
|
1
2
3
4
5
| onKeyupInput(event) {
if (event.key === 'Enter') {
console.log('回车');
}
},
|
换一种更简便的写法：
1
| <input type="text" @keyup.enter="onKeyupInput" />
|
1
2
3
4
5
| methods: {
onKeyupInput(event) {
console.log('回车');
},
}
|
理解 v-model
1
| <input type="text" v-model="content" />
|
1
2
3
4
5
| data() {
return {
content: '天地玄黄'
};
},
|
相当于：
1
| <input type="text" :value="content" @input="content = $event.target.value" />
|
v-model 的修饰符：.lazy：
用 v-model 绑定的值，在修改后会立即发生变化，而添加了 lazy 这个修饰符后，只有在确定或提交后才会发生变化。加了这个修饰符以后，元素就会监听 change 这个事件，只有在提交后才会触发。
1
| <input type="text" v-model.lazy="content" />
|
1
2
3
4
5
| data() {
return {
content: '天地玄黄'
};
},
|
v-model 的修饰符：.number：
1
| <input type="text" v-model="content" @change="onChangeContent" />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| data() {
return {
content: 0,
};
},
created() {
console.log('content的数据类型（组件创建时）：', typeof this.content);
},
methods: {
onChangeContent() {
console.log('content 数据的类型(元素值变化后)：', typeof this.content);
},
},
|
在控制台中你会发现，组件创建时打印的类型是 number，在元素值变化后打印出来的是 string。如果你想让它的类型还是 number 的话，就可以添加.lazy 修饰符：
1
| <input type="text" v-model.number="content" @change="onChangeContent" />
|
这时当元素值变化后就还是 number 类型的值了。
v-model 的修饰符：.trim：
去掉多余的空白，如果不加这个修饰符，用户在文本框输入的空格也会被计算在内，加上.trim 修饰符后，会自动帮我们去掉用户输入的空格。
1
| <input type="text" v-model.trim="content"/>
|