表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue.js提供了 v-model 指令，用于在表单类元素上双向绑定数据
直接上示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-bind="message">
<p>{{message}}</p>
<!-- 一个单选框 可以用v-bind/:绑定的方式来设置选中状态-->
<input type="radio" name="" id="single" :checked="pick">
<label for="single">单选按钮</label>
<br>
<!-- 多个单选框 通过v-model的方式设置选中状态，当v-model的值和input中value的值相等时会选中-->
<input type="radio" name="" id="js" value="js" v-model="picked">
<label for="js">js</label>
<input type="radio" name="" id="html" value="html" v-model="picked">
<label for="html">html</label>
<input type="radio" name="" id="java" value="java" v-model="picked">
<label for="java">java</label>
<br>
<!-- 一个复选框 -->
<input type="checkbox" name="" id="ygfx" v-model="pick">
<label for="ygfx">一个复选框</label>
<br>
<!-- 多个复选框 -->
<input type="checkbox" name="" id="php" v-model="picks" value="php">
<label for="php">php</label>
<input type="checkbox" name="" id="python" v-model="picks" value="python">
<label for="python">python</label>
<input type="checkbox" name="" id="css" v-model="picks" value="css">
<label for="css">css</label>
<br>
<!-- 下拉选 <option>是备选项，如果含有 value 属性， v-model 就会优先匹配 value 的值： 如果没有， 就会 直接匹配＜option＞的 text -->
<!-- 给<selected>添加属性 multiple 就可以多选了， 此时 v-model 绑定的是一个数组， 与复选框用 法类似 -->
<select name="" id="" v-model="picks" >
<option>html</option>
<option>js</option>
<option>php</option>
</select>
<br>
<!-- v-model修饰符 -->
<input type="text" name="" id="" v-model.lazy="picked">
<p>{{picked}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: '',
pick: true,
picked: 'js',
picks:['css','php']
}
})
</script>
</body>
</html>
网友评论