表单输入绑定
<!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: '' 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'
}
}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>
长风破浪会有时，直挂云帆济沧海
