可以使用v-model指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
1、输入框
直接使用v-model指定一个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js表单输入框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>input元素</p>
<input v-model="message" placeholder="请输入内容">
<p>您输入的消息是 {{message}}</p>
<p>textarea 元素</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入......"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '中国🇨🇳',
message2: '我爱你'
}
})
</script>
</body>
</html>
2、单选框
使两个input控件的 v-model指定同一个值X，且data内的赋值X指向
其中一个内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js表单 单选框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="taobao" value="taobao" v-model="picked">
<label for="taobao">taobao</label>
<br>
<input type="radio" id="tencent" value="tencent" v-model="picked">
<label for="tencent">tencent</label>
<br>
<span>您选中的值为： {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: 'taobao'
}
})
</script>
</body>
</html>
3、复选框
v-model指向同一个元素X，且data内对X的赋值，为一个
数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js表单 复选框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>单个复选框</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框</p>
<input type="checkbox" id="tencent" value="tencent" v-model="checkedNames">
<label for="tencent">tencent</label>
<input type="checkbox" id="alibaba" value="alibaba" v-model="checkedNames">
<label for="alibaba">alibaba</label>
<input type="checkbox" id="baidu" value="baidu" v-model="checkedNames">
<label for="baidu">baidu</label>
<br>
<span>您选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: []
}
})
</script>
</body>
</html>
4、下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js表单 select下拉框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- value值是被其他地方使用的，option内的值是写入的选择框中的。 -->
<select v-model="selected" name="fruit">
<option value="">请选择你喜欢的水果</option>
<option value="苹果....">苹果🍎</option>
<option value="香蕉....">香蕉🍌</option>
<option value="香梨....">梨🍐</option>
</select>
<div id="output">
选择的网站是： {{selected}}
</div>
<!-- <input v-modle.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="msg"> -->
</div>
<script>
// 修饰符
// .lazy 修饰符。 默认情况下，v-model在input事件中同步输入框的值与数据，通过添加修饰符后 v-model.lazy 转变为在change事件中同步
// .number 修饰符， 可以将用户输入的值，转换成Number类型。
// .trim 可以自动过滤用户输入的首尾空格，。
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
</html>
网友评论