动态新增class
语法:
- 第一种：<标签 :class="变量" />
- 第二种：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />
- 如果布尔值为true，就添加对应的类名
说明：可以和静态class共存
<body>
<div id="app">
<h3 class="title">v-bind-绑定class</h3>
<!-- 元素自有class和v-bind绑定的class会协同工作，一起生效 -->
<div class="box" v-bind:class="cla ? 'bg-blue': 'bg-green'">
1. 三元表达式
</div>
<!-- 如果对象中的属性值是true,
则把对象中的属性名添加到类名中 -->
<div class="box" :class="claObj">
2. 绑定对象
</div>
<!-- 数组中元素是字符串，
它会把所有的元素全添加到class中 -->
<div class="box" :class="claArr">
3. 绑定数组
</div>
<button @click="hAddClass">补充一个class</button>
</div>
<script>
// v-bind 是用来动态绑定元素的属性，而class也是元素的属性
// 目标： 可以通过动绑定class来控制样式 。
// 方式：
// 1. 三元表达式
// 2. 绑定对象
// 3. 绑定数组
const vm = new Vue({
el: "#app",
// el: document.getElementById("app"),
data: {
cla: false,
claObj: {
fs20: true,
tr: true
},
claArr:['fs20','tr', 'abc']
},
methods: {
hAddClass () {
// 向数组中添加一个类 'c-red'
this.claArr.push('c-red')
}
}
})
</script>
还有即是绑定在对象中,如下:
<template>
<div>
<p :style="obj">动态绑定</p>
<button @click="fn">点我改数字大小</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
fontSize: "90px",
color: "skyblue",
},
};
},
methods: {
fn() {
const size = Math.random() * 200;
this.obj.fontSize = size + "px";
},
},
};
</script>
Vue的计算属性
使用场景
如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。
格式:在vue实例中，补充computed配置项。
{
data(){},
methods: {}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
}
}
下面来个简单的数组求和
<template>
<div>
<h2>计算属性</h2>
<p>{{ num }}</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [23, 421, 523],
};
},
computed: {
num: function () {
//计算结果
return this.arr.reduce((sum, item) => sum + item, 0);
},
},
};
</script>
效果:
computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。
属性名称： 计算属性的名称
属性的值：计算属性的素材函数
对需要依赖的数据，进行逻辑上的处理
处理完毕后，需要return出去，返回的值就是计算属性的值
使用格式
在两个地方使用：
模板
用插值表达式 {{计算属性名}} 用其它指令
在实例内
this.计算属性名
当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：
- 计算属性
- 函数
- methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
- computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。
计算属性会做缓存，提高渲染的性能。
过滤器
目标：
- 理解过滤器的作用和使用场景
- 掌握定义和使用过滤器。
问题导入
对金额和时间做格式化
作用
过滤器的作用：转换格式, 把数据在显示之前做格式转换
格式
定义的格式
{
data(){},
computed:{},
methods:{},
// 定义过滤器
filters: {
// 属性名称（过滤器名称）：属性的值（过滤器处理函数）
myFilter:function(value,其它参数){
return 过滤后的结果
}
}
}
使用的格式
// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}
