- 单向绑定:数据变,视图变;视图变(浏览器控制台上更新html),数据不变;上面的都是单向绑定
- 双向绑定:数据变,视图变;视图变(在输入框更新),数据变;
v-model 指令用于表单数据双向绑定,针对以下类型:
- text 文本
- textarea 多行文本
- radio 单选按钮
- checkbox 复选框
- select 下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo">
<form action="#" @submit.prevent="submitForm">
姓名(文本):<input type="text" name="name" id="" v-model="name">
<br><br>
性别(单选按钮):
<input type="radio" name="sex" value="1" id="" v-model="sex">男
<input type="radio" name="sex" value="0" id="" v-model="sex">女
<br><br>
技能(多选框):
<input type="checkbox" name="skills" value="java" id="" v-model="skills">java开发
<input type="checkbox" name="skills" value="vue" id="" v-model="skills">Vue.js开发
<input type="checkbox" name="skills" value="python" id="" v-model="skills">Python开发
<br><br>
城市(下拉框):
<select name="city" id="" v-model="city">
<option v-for="c in citys" :value="c.code">{{c.name}}</option>
</select>
<br><br>
说明(多行文字):
<textarea name="desc" id="" cols="30" rows="10" v-model="desc"></textarea>
<br><br>
<button type="submit">提交</button>
</form>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
name: '',
sex: 0,
skills: ["vue"],
citys: [
{code:'bj',name:'北京'},
{code:'sh',name:'上海'},
{code:'nj',name:'南京'}
],
city: '',
desc: ''
},
methods: {
submitForm: function(){
alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)
}
},
})
</script>
</body>
</html>
git源码:https://github.com/caiyuanzi-song/vue-demo.git