动态class
v-bind可以给标签class设置动态的值
- 格式1：<标签 :class="变量" />
- 格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />
- 如果布尔值为true，就添加对应的类名 v-bind 是用来动态绑定元素的属性，而class也是元素的属性
动态style
<标签 :style="{css属性名: 值}" />
- 可以和静态style共存
- 样式中带-属性写成小驼峰
<div id="app">
<h3 class="title">v-bind-绑定style</h3>
<!-- 把对象的属性名和属性值直接设置到style中 -->
<div class="box" :style="styleObj">
1. 绑定对象
</div>
<!-- 把数组中的每一个元素（对象），取出来，组成style -->
<div class="box" :style="styleArr">
2. 绑定数组
</div>
<button @click="hBlack">改成黑色的字</button>
</div>
<script>
// v-bind 是用来动态绑定元素的属性，而style也是元素的属性
// 目标： 可以通过动绑定style来控制样式 。
// 方式：
// 1. 绑定对象
// 2. 绑定数组
const vm = new Vue({
el: "#app",
// el: document.getElementById("app"),
data: {
styleObj: {
color:'red',
// 如果属性名有-，则要加''
'background-color':'blue'
},
// 数组中的每一项都是一个对象，其中以键值对的格式设置了style
styleArr:[ {color:'red','font-weight':'bold'}, {'font-size':'50px'} ]
},
methods: {
hBlack () {
// 直接把styleObj中的color设置成black
this.styleObj.color = "black"
}
}
})
</script>
computed计算属性
如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性
{
data(){},
methods: {}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
计算属性名2 () {
// 对依赖的数据进行处理，且进行return
return
}
}
}
computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。
-
属性名称： 计算属性的名称
-
属性的值：计算属性的素材函数
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值
计算属性的特点：缓存
如果计算属性所依赖的数据项并没有发生变化，则就算使用多个计算函数，其函数也只执行一次 因为它把结果缓存起来了。
计算属性的完整写法
<template>
<div>
<div>
<span>名字:</span>
<input type="text" v-model="full"> //v-model双向绑定
</div>
</div>
</template>
<script>
data () {
return {
msg: 'full'
}
},
computed: {
"属性名": {
set(val){ // 要给元素修改的值,小括号里的参数就是要修改元素的值,语法是赋值给原有的元素
this.msg = val //将输入框里的内容赋值给msg元素
},
get() { //获取元素的值,语法: return "值"
console.log(this.msg);
return this.msg
//这段代码获取的是msg元素的值控制台会打印full
}
}
}
</script>
过滤器
过滤器的作用：转换格式, 把数据在显示之前做格式转换
定义的格式
//过滤器属性名
filters: {
// 自定义属性名称（过滤器名称）：属性的值（过滤器处理函数）
myFilter(value,其它参数){
return 过滤后的结果
}
使用的格式
// 不带参数
{{ msg | 过滤器}} //使用时用|和过滤器名称隔开,名称是在过滤器中自定义的属性名
// 带参数
{{ msg | 过滤器(参数)}}
示例
- 它的工作过程就是函数的调用执行过程。
- 过滤器本质是一个函数：它的接收的参数是格式化之前的数据及格式化的参数，它的返回值是格式化之间的值
vue监听器
作用:可以监听数据（data/computed等）的值的改变。 数据的值有类型：基本数据类型，引用数据类型
<template>
<div>
<input type="text" v-model="user.name"> //双向绑定页面内容变动后,会把变动的传回
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return {
user: {
name: "小白",
age: 18
}
}
},
watch: { // 固定属性(设置监听哪些属性)
user: { // 被监听的属性名
handler(newVal, oldVal){ // 固定触发此函数
console.log(newVal);//控制台会打印表单输入的最新数据
console.log(oldVal)//控制台会打印旧值,小白和18
//newVal 新值
//oldVal 旧值
},
immediate: false, // 进入页面后马上监听触发
deep: true
// deep深度监听监听复杂类型数据,对象类型或嵌套类型的需要使用深度监听才可以监听的到,普通类型的数据不用深度监听也可以监听的到,
}
}
}
</script>
