Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录
案例讲解：
# 有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
methods: {
actionFn() {
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
// 0 % 3 余 0
// 1 % 3 余 1 ....
}
}
一. 表单指令
1.重点:
<!--v-model='变量' 可以完成双向绑定-->
<!--变量值与表单标签的value相关-->
<input type="text" name="user" placeholder="输入账号" v-model="v1">
<input type="text" name="password" placeholder="输入密码" v-model="v1">
<!--v-model绑定的变量值可以影响到表单标签的值 反过来表单标签的值也可以影响变量的值-->
补充
<!--数字之间的加减 例如字符串和num 可以在字符串前加上+即可转换成num-->
2.单选框
男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }} <!--v2的值是单选框的value-->
3.单一复选框
是否同意：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }} <!--v3拿到的是布尔值 -->
4.多复选框
爱好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }} <!--拿到的是一个数组 [ "male", "female" ] -->
<!--但是你必须给个数组-->
data: {
v1: '123', // v-model
v2: 'male', // 单选框
v3: false, // 单一复选框
v4: ['male', 'female'] // 复选框
}
二 . 条件指令
v-if/v-show ...
v-show='布尔值' v-if='布尔值'
v-if | v-else-if | v-else
v-show 和 v-if 之间的区别:
// v-show='布尔值' 隐藏时:采用display:none进行渲染
// v-if='布尔值' 隐藏时:不在页面中渲染(保证不渲染的数据泄露)
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
<!--不成立就不会渲染!!-->
v-clock
# 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
js 不变，在 div 中加入 v-cloak 指令
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak]{
display: none;
}
三 . 循环指令
<!--循环指令：v-for="ele in string|array|obj" -->
string
<i v-for="c in string">{{ c }} </i> <!--string 现在为字符串 我们可以直接拿到 {{ c }}-->
<i v-for="(c, i) in string">{{i}}:{{c}</i> <!--c 为值 i 为索引-->
arrag
<div v-for="e in arrag">{{ e }}</div>
<div v-for="(e, i) in arrag">{{ i }}:{{ e }}</div> <!--e 为值 i 为索引-->
obj
<div v-for="v in obj">{{ v }}</div> <!--v 为值-->
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<!--v 为值--> <!--k 为键--> <!--i 为索引-->
<!--v-for中需要给循环的组件或者标签中建立 :key= 完成缓存的建立-->
循环指令案例(splice):
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法：splice(begin_index, count, ...args)
// 从第0位开始 操作2位 操作内容为 args
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
四 . localstorage and sessionstorage
// 前台数据库
// localStorage: 永久存储
// sessionStorage：临时存储(所属页面标签被关闭后，清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// localStorage.n1
// sessionStorage.n2
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// JSON.parse(localStorage.arr)
// 清空数据库
// localStorage.clear();
五.分隔符(了解)
delimiters: ['[{', '}]'], // 修改插值表达式符号
<div id="app">
{{ msg }}
[{ msg }] <!--修改过后的-->
</div>
六.过滤器
1.在filters成员中定义过滤器方法
<p>{{ num | f1 }}</p>
filters:{
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
return num * 10;
},
}
2.可以对多个值进行过滤，过滤时还可以额外传入辅助参数
<p>{{num , num2 | f2 }}</p>
filters:{
// 传入所有要过滤的条件，返回值就是过滤的结果
f2(num, num2){ // 接受两个参数
return num * num2
},
}
3.过滤的结果可以进行下一次过滤(过滤的串联)
<p>{{ num , num2 | f2 | f3 }}</p>
filters:{
f3(num){
return num * 3
},
}
7.计算属性
1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性的值
案例:
<input type="text" value="" v-model="v1">
<input type="text" value="" v-model="v2">
<p>{{ result }}</p>
computed:{
result(){
this.v1;
this.v2;
return +this.v1 + +this.v2;
}
}
一般用来解决的问题：一个变量值依赖于多个变量
8.监听属性
1、监听的属性需要在data中声明，监听方法不需要返回值
2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
3、监听方法有两个回调参数：当前值，上一次值
案例:
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
data:{s
full_name:'',
first_name:'',
last_name:''
},
watch:{
full_name(n,i){
console.log(n, i);
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
}
}
解决的问题：多个变量值依赖于一个变量值
吾虽浪迹,却未迷失本心
