表单元素绑定数据:v-model
非表单元素绑定数据:
v-html:指令当做标签或者组件的属性使用作用:数据绑定(可以识别字符串标签)
v-text:作用:数据绑定(不识别字符串标签)
示例代码:
<!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>
<script src="../vue.js"></script>
<body>
<div id="app">
{{userInfo}}
<p>
用户名:<input type="text" v-model="userInfo.username">
</p>
<p>
密码:<input type="password" v-model="userInfo.pasw">
</p>
<p>
性别:<input type="radio" name="sex" v-model="userInfo.sex" :value="0">男
<input type="radio" name="sex" v-model="userInfo.sex" :value="1">女
</p>
<p>
工作:
<select v-model="userInfo.job">
<option :value="item.value" v-for="(item,index) in jobList">
{{item.title}}
</option>
</select>
</p>
爱好:
<p v-for="(item,index) in hobbyList" >
<input type="checkbox" :value="item.value" v-model="userInfo.hobby">{{item.title}}
</p>
<p>
是否同意:<input type="checkbox" v-model="userInfo.isgree">
</p>
</div>
<script>
new Vue({
el: "#app",
data: {
userInfo: {
username: 'admin',
pasw: '123',
sex: 0,
job: 'php',
hobby: ['smoking'],
isgree: true
},
jobList: [
{
id: 1,
value: 'web',
title: 'web工程师'
}, {
id: 2,
value: 'java',
title: 'java工程师'
}, {
id: 3,
value: 'php',
title: 'php工程师'
}
],
hobbyList: [
{
id: 1,
value: 'travel',
title: '旅游'
}, {
id: 2,
value: 'draw',
title: '绘画'
}, {
id: 3,
value: 'eat',
title: '干饭'
}
]
},
methods: {
submit() {
console.log(this.userInfo);
// 发送请求
}
},
});
</script>
</body>
</html>
运行结果:(当表单内的数据发生改变,上面的内容会一起改变)