表单输入绑定
<!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>
</head>
<body>
<div id="app">
<div>
用户名：<input type="text" v-model="username" @keyup="valiusername" placeholder="用户名">{{ usernametip }}
</div>
<div>
密码：<input type="password" v-model="password" placeholder="密码">
</div>
<div>
性别：
<input type="radio" name="sex" v-model="sex" value="1">男
<input type="radio" name="sex" v-model="sex" value="0">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" v-model="hobby" value="1">唱
<input type="checkbox" name="hobby" v-model="hobby" value="2">跳
<input type="checkbox" name="hobby" v-model="hobby" value="3">rap
<input type="checkbox" name="hobby" v-model="hobby" value="4">篮球
</div>
<div>
<select v-model="lesson">
<option value="" disabled>请选择</option>
<option value="1">一阶段</option>
<option value="2">二阶段</option>
<option value="3">三阶段</option>
</select>
</div>
<div>
备注：
<textarea v-model="note" placeholder="请填写您的特殊需求"></textarea>
</div>
<div>
<input type="checkbox" v-model="flag">已阅读***协议
</div>
<button @click="getData">获取用户的信息</button>
{{ tip }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
sex: '1',
hobby: ['2'], // checkbox 作为多选，类型为数组
lesson: '',
note: '',
flag: false, // checkbox 作为选中还是未选中，类型为boolean
tip: '',
usernametip: ''
},
methods: {
valiusername () {
if (this.username === '') {
this.usernametip = '用户名不能为空'
} else if (this.username.length < 5) {
this.usernametip = '请输入正确格式的用户名'
} else {
this.usernametip = 'ok'
}
},
getData () {
if (this.flag) {
console.log({
username: this.username, // username: username 如果key和value相同，可以使用简写形式 username
password: this.password,
sex: this.sex,
hobby: this.hobby,
lesson: this.lesson,
note: this.note,
flag: this.flag
})
} else {
this.tip = "请先勾选同意阅读***协议" // 修改初始化数据
}
}
}
})
</script>
</html>
计算属性
任何复杂的业务逻辑，都应当使用计算属性
计算属性具有依赖性，依赖的值发生改变，计算属性的值才会发生改变
计算属性 PK 方法
计算属性具有依赖性，只有依赖的值发生改变才会重新触发改变
方法 只要执行一次，就会触发一次
<!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>
</head>
<body>
<div id="app">
<div>
用户名：<input type="text" v-model="username" placeholder="用户名">{{ usernametip }}
</div>
<div>
密码：<input type="password" v-model="password" placeholder="密码">{{passwordtip}}
</div>
<div>
性别：
<input type="radio" name="sex" v-model="sex" value="1">男
<input type="radio" name="sex" v-model="sex" value="0">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" v-model="hobby" value="1">唱
<input type="checkbox" name="hobby" v-model="hobby" value="2">跳
<input type="checkbox" name="hobby" v-model="hobby" value="3">rap
<input type="checkbox" name="hobby" v-model="hobby" value="4">篮球
</div>
<div>
<select v-model="lesson">
<option value="" disabled>请选择</option>
<option value="1">一阶段</option>
<option value="2">二阶段</option>
<option value="3">三阶段</option>
</select>
</div>
<div>
备注：
<textarea v-model="note" placeholder="请填写您的特殊需求"></textarea>
</div>
<div>
<input type="checkbox" v-model="flag">已阅读***协议
</div>
<button @click="getData">获取用户的信息</button>
{{ tip }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
sex: '1',
hobby: ['2'], // checkbox 作为多选，类型为数组
lesson: '',
note: '',
flag: false, // checkbox 作为选中还是未选中，类型为boolean
tip: ''
},
computed: {
usernametip () {
if (this.username === '') {
return '不能为空'
} else if (this.username.length < 5) {
return '格式不对'
} else {
return 'ok'
}
},
passwordtip () {
if (this.password === '') {
return '不能为空'
} else if (this.password.length < 5) {
return '格式不对'
} else {
return 'ok'
}
}
},
methods: {
getData () {
if (this.flag) {
console.log({
username: this.username, // username: username 如果key和value相同，可以使用简写形式 username
password: this.password,
sex: this.sex,
hobby: this.hobby,
lesson: this.lesson,
note: this.note,
flag: this.flag
})
} else {
this.tip = "请先勾选同意阅读***协议" // 修改初始化数据
}
}
}
})
</script>
</html>
侦听属性
侦听属性 PK 计算属性
侦听属性需要 比 计算属性多添加初始化的变量
任何复杂的业务逻辑，都应当使用计算属性
<!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> </head> <body> <div id="app"> <div> 用户名：<input type="text" v-model="username" placeholder="用户名">{{ usernametip }} </div> <div> 密码：<input type="password" v-model="password" placeholder="密码"> </div> <div> 性别： <input type="radio" name="sex" v-model="sex" value="1">男 <input type="radio" name="sex" v-model="sex" value="0">女 </div> <div> 爱好： <input type="checkbox" name="hobby" v-model="hobby" value="1">唱 <input type="checkbox" name="hobby" v-model="hobby" value="2">跳 <input type="checkbox" name="hobby" v-model="hobby" value="3">rap <input type="checkbox" name="hobby" v-model="hobby" value="4">篮球 </div> <div> <select v-model="lesson"> <option value="" disabled>请选择</option> <option value="1">一阶段</option> <option value="2">二阶段</option> <option value="3">三阶段</option> </select> </div> <div> 备注： <textarea v-model="note" placeholder="请填写您的特殊需求"></textarea> </div> <div> <input type="checkbox" v-model="flag">已阅读***协议 </div> <button @click="getData">获取用户的信息</button> {{ tip }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { username: '', password: '', sex: '1', hobby: ['2'], // checkbox 作为多选，类型为数组 lesson: '', note: '', flag: false, // checkbox 作为选中还是未选中，类型为boolean tip: '', usernametip: '' }, watch: { username (newVal, oldVal) { if (newVal === '') { // 用户名不能为空 this.usernametip = '用户名不能为空' } else if (newVal.length < 5) { // 用户名格式不对 this.usernametip = '用户名格式不对' } else { // ok this.usernametip = 'ok' } } }, getData () { if (this.flag) { console.log({ username: this.username, // username: username 如果key和value相同，可以使用简写形式 username password: this.password, sex: this.sex, hobby: this.hobby, lesson: this.lesson, note: this.note, flag: this.flag }) } else { this.tip = "请先勾选同意阅读***协议" // 修改初始化数据 } } } }) </script> </html>