一、表单
v-model:value="data数据" 简写 v-model="data数据"
1. 输入框
A: 与输入框内容进行关联, 获取的是内容
B: 单个属性名 txt:''
<input type="text" v-model="txt">
2. 单选框
A: 需要配合value属性使用, 获取value属性的值
B: 单个属性名 rad:""
<input type="radio" v-model="rad" value="男">
3. 单个多选框
A: 获取多选框的checked属性(布尔值) true选择 false未选择
B: 单个属性名 che:""
<input type="checkbox" v-model="che">
4. 多个多选框
A: 获取多选框的value属性,获取value属性的值
B: 一个数组格式 cheArr: []
<input type="checkbox" v-model="cheArr" value="吃饭">
5. 下拉框
A: 获取下拉框的value属性, 没有设置value 使用option的内容作为value值
B: 单个属性名 sele:""
C: 设置默认值 v-model="吃饭" 进行设置
6. 下拉框选择多个
A: 获取下拉框的value属性,
B: 一个数组格式 seleArr: []
7. 修饰符
.lazy v-model触发方式(oninput事件)改为change触发
<input type="text" v-model.lazy="txt">
.number 将输入的内容为数字类型
<input type="text" v-model.number="txt">
.trim 清空输入框两侧空格
<input type="text" v-model.trim="txt">
二、特殊指令
优化性能的
v-cloak 元素编译完成之后才会显示
v-pre 元素跳过vue编译
v-once 元素只会渲染一次,后续不会更新变化
示例（这里示例v-cloak，其他写法一样）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" >
<p v-once>{{userInfo.txt}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
userInfo: {
txt: "pxr",
pass: "",
rad: "",
cheArr: [],
}
},
})
</script>
</body>
</html>三、选项---computed计算属性
（一）认识computed计算属性
选项 el data methods computed计算属性
computed计算属性
1. 在其中设置属性名用于在模版中使用,属性值是回调函数
2. 回调函数的返回值(return)会展示到模板中
3. 回调函数的this是 vue实例
<div id="app">
{{getArr}}
</div>
let vm = new Vue({
el: "#app",
data() {
return {
arr: [1, 2, 4, 5, 6]
}
},
// 计算属性
computed: {
getArr() {
return this.arr.join().substr(1, 5).split(",").reduce((pre, next) => {
return pre + next
})
}
}
})
补充
1. 插值符中表达式,建议你写简单的表代式, 不要复杂的表达式,不利于维护
2. 插值符中表达式复杂的逻辑代码(表达式)放在computed里面
（二）深入理解computed计算属性
computed计算属性
1. 理解计算属性
A: 拿着data已写好的属性数据,进行加工处理(计算), 不要在模板上写复杂的表达式
2. 深入计算属性
A: 页面(vue模板)中获取了对应的computed数据,对应函数会执行
B: get函数,页面(模板)获取时对应的get会执行
C: set函数,对应set函数的属性进行赋值触发函数,一般用于修改get函数中的数据
D: get函数中依赖的属性(data属性)发生变化的,get函数会重新触发
E: 简写也会触发
<div id="app">
{{getArr}}-{{getNum}}
</div>
let vm = new Vue({
el: "#app",
data() {
return {
arr: [1, 2, 4, 5, 6],
num: 100,
}
},
// 计算属性
computed: {
// 简写
getArr() {
return this.arr.join().substr(1, 5).split(",").reduce((pre, next) => {
return pre + next
})
},
// 深度写法
getNum:{
// 模板获取getNum数据是触发
get(){
return this.num + 100
},
// 设置getNum触发set函数 set函数很少用
set(value){
this.num = value
}
}
}
})
（三）computed与methods区别
1. cimputed直接使用,methods方法需要执行
2. computed计算属性具有缓存机制,每次获取,数据未发生变化,取缓存的数据, 发生变化会重新计算
3. methods方法每次都会执行来获取数据
4. 工具可以直接看到 computed的数据
补充
vue页面(模板)数据发生变化,会重新渲染页面
<div id="app">
<p>计算属性: {{getArr}}</p>
<p>方法: {{meArr()}}</p>
<p>定义值:{{num}}</p>
</div>
let vm = new Vue({
el: "#app",
data() {
return {
arr: [1, 2, 4, 5, 6],
num: 100,
}
},
// 计算属性
computed: {
// data数据发生变化重新计算
getArr() {
console.log("计算属性");
return this.arr.join().substr(1).split(",").reduce((pre, next) => {
return pre + next
})
},
},
methods:{
// 页面数据发生变化,重新执行函数,获取数据
meArr(){
console.log("方法");
return this.arr.join().substr(1).split(",").reduce((pre, next) => {
return pre + next
})
}
}
})
3761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
