Vue——表单与v-model
1.基本用法
表单类控件承载了一个网页数据的录入与交互。
vue提供了v-model用于表单类元素上双向绑定数据.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="text" placeholder="输入..."></input>
<p>输入的内容是：</p>
<p style="white-space: pre">{{ text }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
text: ''
}
})
</script>
</body>
</html>
在输入框输入的同时，{{ message }}也会实时将内容渲染在视图中。
还可以使用@input来替代v-model。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" @input="handleInput" placeholder="输入...">
<!--在使用v-model进行中文输入的时候，只有选定中文数据才会更新-->
<!--如果想实时更新的话可以使用@input,功能与v-model类似-->
<p>输入的内容是：{{ message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ''
},
methods: {
handleInput: function (e) {
this.message = e.target.value;
}
}
})
</script>
</body>
</html>
下面是几种常见的使用类型：
1）单选按钮
（1）单独使用
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔值就可以。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
picked: true
}
})
</script>
</body>
</html>
（2）组合使用
如果是组合使用来实现互斥选择的效果就需要v-model配合value来使用。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="html">JS</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="html">CSS</label>
<br>
<p>选择的项是：{{ picked }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
picked: 'js' //此处设置默认值
}
})
</script>
</body>
</html>
效果：
2）复选框
（1）单独使用
复选框单独使用使用时也是使用v-model加上一个布尔值来使用。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框————单独使用</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态： {{checked}}</label>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
checked: false
}
})
</script>
</body>
</html>
效果：
（2）组合使用
组合使用时，也是v-model和value一起，多个勾选框都绑定到同一个数组类型的数据。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框————组合使用</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="html">JS</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="html">CSS</label>
<br>
<p>选择的项是：{{ checked }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
checked: ['html']
}
})
</script>
</body>
</html>
效果：
3）选择列表
（1）单选
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option>html</option>
<option>JavaScript</option>
<option>css</option>
</select>
<p>选择的选项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
selected: ''
}
})
</script>
</body>
</html>
效果：
如果<option>含有value属性，v-model就会优先匹配value的值，如果没有就会匹配<option>的text。
（2）多选
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option>JavaScript</option>
<option>css</option>
</select>
<p>选择的选项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
selected: ''
}
})
</script>
</body>
</html>
效果：
（3）动态输出
在业务中经常使用的是v-for动态输出.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>选择的结果是： {{ selected }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
selected: 'html',
options: [
{
text: 'HTML',
value: 'html'
},
{
text: 'JS',
value: 'js'
},
{
text: 'CSS',
value: 'css'
}
]
}
})
</script>
</body>
</html>
效果：
2.绑定值
在业务中，有时候需要绑定一个动态的数据，这时候可以使用v-bind来实现.
1）单选按钮
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
picked: false,
value: 123
}
})
</script>
</body>
</html>
效果：
2）复选框
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>复选框</label>
<p>{{ toggle }}</p>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
toggle: false,
value1: 'a',
value2: 'b'
}
})
</script>
</body>
</html>
效果：
3）选择列表
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option :value="{ number: 123 }">123</option>
</select>
{{ selected.number }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
selected: ''
}
})
</script>
</body>
</html>
效果：
3.修饰符
与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
1）lazy
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!--v-model默认事在input事件中同步输入框的数据-->
<!--.lazy会转变为在change事件中同步-->
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
<!--message并不是实时改变，而是在失去焦点或者回车时才更新-->
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body>
</html>
2）number
.number可以将输入转化为number类型。
虽然你输入的是数字，但是程序收到的却是字符串。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="number" v-model.number="message">
<p>{{ typeof message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: 123
}
})
</script>
</body>
</html>
3）trim
.trim:自动过滤字符串首尾的空格。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body>
</html>
以上是 Vue——表单与v-model 的全部内容， 来源链接： utcz.com/z/379121.html
