Day 66 Vue指令/过滤器/监听属性/计算属性
Vue
表单指令
v-model="变量"
普通的标签:变量就代表了value值
单选标签(radio):变量为多个单选框中某一个的value值
单个多选标签:变量为布尔值,代表是否选中
多个多选标签(checkbox):变量为数组,存放选中的选项的value
<div id="app">
<form action="">
<input type="text" name="nomal" v-model="v1">
{{ v1 }}
<hr>
男:<input type="radio" name="sex" value="male" v-model="v2">
女:<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
<hr>
是否同意:<input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
篮球 <input type="checkbox" name="hobbies" value="basketball" v-model="v4">
足球 <input type="checkbox" name="hobbies" value="soccer" v-model="v4">
{{ v4 }}
<hr>
<button>提交</button>
</form>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '111',
v2: '',
v3: false,
v4: []
}
})
</script>
条件指令
v-show="布尔变量"
隐藏时,采用display:none进行渲染
v-if="布尔变量"
隐藏时,不在页面中渲染(保证不渲染的数据不泄露)
v-if | v-else-if | v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
[v-cloak] { display: none; }
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app">
<div class="box r" v-show="is_show"></div>
<!--前端完全看不到数据-->
<div class="box b" v-if="is_show"></div>
<div class="wrap">
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
<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="page === 'g_page'"></div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_show: false,
page: 'r_page'
}
})
</script>
</body>
</html>
循环指令
v-for="ele in string|array|obj"
<div id="app">
<span>{{ info }}</span>
<div>
<span v-for="i in info">{{ i }} </span>
</div>
<div v-for="(i, index) in info">
{{ index }}:{{ i }}
</div>
<div v-for="(i, index) in stus">
{{ index }}:{{ i }}
</div>
<div v-for="(v, k, i) in people">
{{ i }} {{ v }}:{{ k }}
</div>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }} </span>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: 'message',
stus: ['Tiny', 'Jim', 'Tom'],
people: {
'name': 'Tiny',
'age': 18,
'gender': 'male'
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
分隔符
dilimiters: ['[{', '}]']
修改插值表达式符号
过滤器
- 在filters成员中定义过滤器方法
- 可以对多个值进行过滤,过滤时还可以额外传入辅助参数
- 过滤的结果可以再进行下一次过滤(过滤的串联)
<div id="app">
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
计算属性
- computed计算属性可以声明 方法属性 (方法属性一定不能在data中重复声明)
- 方法属性 必须在页面中渲染,才会启用绑定的方法,方法属性的值就是绑定方法的返回值
- 绑定方法中出现的所有变量都会被监听,任何一个变化值更新都会重新触发绑定方法,从而更新方法属性的值
<div id="app">
<input type="number" min="0" max="100" v-model="v1">
<input type="number" min="0" max="100" v-model="v2">
<!-- <button>{{ +v1 + +v2 }}</button>-->
<button>{{ result }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
},
computed: {
result() {
v1 = +this.v1;
v2 = +this.v2;
return v1 + v2
}
}
})
</script>
监听属性
- 监听的属性需要在data中声明,监听方法不需要返回值
- 监听的方法就是监听的属性名,该属性值发生更新时就会回调监听方法
- 监听方法有两个回调参数:当前值, 上一次值
<div id="app">
<p>姓名: <input type="text" v-model="full_name"></p>
<p>姓: {{ first_name }}</p>
<p>名: {{ last_name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: 'NaN',
last_name: 'NaN'
},
watch: {
full_name(n, o) {
// console.log(n, o)
arr = n.split('');
this.first_name = arr[0];
this.last_name = arr[1]
}
}
})
</script>
