1 数据监测
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>总结</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学生信息</h2>
<!-- 添加按钮，实现功能 -->
<button @click="student.age++">年龄+1</button>
<button @click="addSex">添加性别属性，默认值为男</button>
<button @click="updateSex">修改性别</button>
<button @click="addFriend">在朋友列表首位添加一个朋友</button>
<button @click="updatefirstF">修改第一个朋友的名字为：小章</button>
<button @click="addHobby">添加一个爱好</button>
<button @click="updatefirstHobby">修改第一个爱好为：吃饭</button>
<h3>姓名：{{student.name}} ---- 年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>朋友</h3>
<ul>
<li v-for="(fr,index) in student.friends" :key="index">姓名：{{fr.name}} -----
年龄：{{fr.age}}
</li>
</ul>
<h3>爱好</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
</ul>
</div>
<script>
// 实现后添加的数据也能有响应式的功能
const vm = new Vue({
el: '#root',
data: {
name: 'Vue',
address: '北京',
student: {
name: '张三',
age: 18,
hobby: ['学习', '喝酒', '烫头'],
friends: [
{ name: '李四', age: 32 },
{ name: '王五', age: 29 }
]
}
},
methods: {
addSex() {
// 方法1：
// vm.$set(vm.student, 'sex', '男')
// 方法2：
Vue.set(this.student, 'sex', '男')
},
updateSex() {
this.student.sex = '女'
},
addFriend() {
this.student.friends.unshift({ name: '赵六', age: 30 })
},
updatefirstF() {
this.student.friends[0].name = '小章'
},
addHobby() {
this.student.hobby.unshift('看片')
},
updatefirstHobby() {
this.student.hobby.splice(0, 1, '吃饭')
// Vue.set(this.student.hobby, 0, '吃饭')
}
},
})
</script>
</body>
</html>总结：
2 收集表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收集表单数据</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form action="" @submit.prevent="submit">
<!-- 也可以直接放入label标签中 -->
<!-- <label>密码：
<input type="password">
</label> -->
<!-- 修饰符 trim, number, lazy -->
<!-- v-model.trim 去掉前后空格 -->
<label for="userName">账号：</label>
<input type="text" id="userName" v-model.trim="userInfo.account"><br>
<label for="passWord">密码：</label>
<input type="password" id="passWord" v-model.trim="userInfo.password"><br>
性别：
<input type="radio" name="sex" checked v-model="userInfo.sex" value="男">男
<input type="radio" name="sex" v-model="userInfo.sex" value="女">女<br>
年龄：
<input type="number" v-model.number="userInfo.age"><br>
<!-- v-model.number 将写的内容收集成数字类型 -->
爱好：
学习<input type="checkbox" name="" v-model="userInfo.hobby" value="学习">
吃饭<input type="checkbox" name="" v-model="userInfo.hobby" value="吃饭">
睡觉<input type="checkbox" name="" v-model="userInfo.hobby" value="睡觉"><br>
所属校区:
<select v-model="userInfo.city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="nj">南京</option>
<option value="sh">上海</option>
<option value="sz">苏州</option>
</select>
<br><br>
其它信息：<br>
<!-- 不希望实时收集 v-model.lazy -->
<textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other">
</textarea>
<br><br>
<input type="checkbox" name="" id="" v-model="userInfo.agreement">
阅读并接受用户协议<a href="http://www.baidu.com">用户协议</a>
<br><br><br>
<button>提交</button>
</form>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
sex: '',
hobby: [],
city: '',
other: '',
agreement: '',
age: ''
}
},
methods: {
submit() {
console.log(JSON.stringify(this.userInfo))
}
},
})
</script>
</body>
</html>总结：
3 过滤器
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后的当前时间</h2>
<!-- 1. 计算属性实现 -->
<h3>{{forTime}}</h3>
<!-- 2. methods实现 -->
<h3>{{getTime()}}</h3>
<!-- 3.过滤器实现 -->
<h3>{{time | formatTime}}</h3>
<!-- 过滤器传参 -->
<h3>{{time | formatTime('YYYY-MM-DD')}}</h3>
<!-- 截取 多个过滤器的串联-->
<h3>{{time | formatTime('YYYY-MM-DD') | mySlice}}</h3>
</div>
<script>
// 配置全局的过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
const vm = new Vue({
el: '#root',
data: {
time: 1707209007850
},
computed: {
forTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
getTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
// 局部过滤器
filters: {
formatTime(time, str = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(time).format(str)
},
mySlice(value) {
return value.slice(0, 4)
}
}
})
</script>
</body>
</html>总结：
