动态class
语法:
格式1：<标签 :class="变量" />
格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />
如果布尔值为true，就添加对应的类名
动态style
语法:
<标签 :style="{css属性名: 值}" />
可以和静态style共存
样式中带-属性写成小驼峰
计算属性
- computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数
- 属性名称： 计算属性的名称
- 属性的值：计算属性的素材函数
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值
{
data(){},
methods: {}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
计算属性名2 () {
// 对依赖的数据进行处理，且进行return
return
}
}
}
计算属性完整写法
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
vue中过滤器 作用: 转换格式, 把数据在显示之前做格式转换
格式:
{
data(){},
computed:{},
methods:{},
// 定义过滤器
filters: {
// 属性名称（过滤器名称）：属性的值（过滤器处理函数）
myFilter:function(value,其它参数){
return 过滤后的结果
}
}
}
使用的格式
// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}
把时间戳转换为年-月-日格式
filters: {
// 过滤器的定义
// 属性名称（过滤器名称）：属性的值（过滤器处理函数）
// myFilter: function(value,其它参数) {
// }
fFormatDate: function (val) {
console.log('val', val)
// val 就是需要被过滤器处理的值
// return '你被过滤了' + val
const dt = new Date(val)
return dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate()
}
}
调用
日期:{{ timeStamp | fFormatDate}},
注意：
- 它的工作过程就是函数的调用执行过程。
- 过滤器本质是一个函数：它的接收的参数是格式化之前的数据及格式化的参数，它的返回值是格式化之间的值
vue监听器-基本使用 语法:
watch: {
"被监听的属性名" (newVal, oldVal){
}
}
监听属性-深度监听和立即执行
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
注意点: immediate立即监听, deep深度监听, handler固定方法触发
孤独是一种享受
