用v-bind给标签class设置动态的值
注意:
- 可以和静态的class共存
- 多个类名用数组存起来
- 类名保存在vue变量中赋予给标签
- 可以使用对象来对类名的添加,属性名是类名,属性值是布尔类型,为true就添加,为false就不添加
<template>
<div>
<p :class="type">薛之谦</p>
<p :class="['red', 'f40']">天外来物</p>
<p :class="{ red: true, blue: false }">迟迟</p>
</div>
</template>
<script>
export default {
data() {
return {
type: 'blue'
}
}
}
</script>
<style>
.f40 {
font-size: 20px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
给标签动态设置style的值
注意:
- 可以和静态的style共存
- 样式中带-的属性写成小驼峰
<template>
<div>
<p :style="obj">薛之谦</p>
<button @click="fn">设置随机颜色和大小</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
backgroundColor: 'skyblue',
color: 'red',
fontSize: '40px'
}
}
},
methods: {
fn() {
const fs = Math.random() * 100
let str = '#'
for (let i = 1; i <= 6; i++) {
str += parseInt(Math.random() * 16).toString(16)
}
console.log(str)
this.obj.color = str
this.obj.fontSize = fs + 'px'
}
}
}
</script>
<style>
.f40 {
font-size: 40px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
计算属性
在原数据的基础上计算得到一个新的值
注意:
- 一定要有返回值return
- 在模板里面,使用插值表达式
- 调用的时候不要加小括号
- 计算属性有缓存
- 多次使用,只会调用一次
<div id="app">
<h3>{{msg.split('').reverse().join('')}}</h3>
<h3>{{reverseMsg}}</h3>
</div>
<script src="./vue.js"></script>
<script>
{
data () {
return { msg: 'hi vue' }
},
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}
})
</script>
计算属性的完整写法
应用场景: 全选与单选
<template>
<div>
<span>全选:</span>
<input type="checkbox" v-model="isCheckedAll" />
<!-- 当点击反选按钮的时候，进行取反 -->
<button @click="isCheckedAll = !isCheckedAll">反选</button>
<ul>
<li v-for="item in arr" :key="item.name">
<input v-model="item.checked" type="checkbox" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: '猪八戒',
checked: false
},
{
name: '孙悟空',
checked: true
},
{
name: '唐僧',
checked: false
},
{
name: '白龙马',
checked: false
}
]
}
},
computed: {
isCheckedAll: {
// //是否全选
// return this.arr.every((item) => item.checked)
//1. 当全选框的值被修改（要设置）的时候，要用到set,全选框的值修改，单选框的值也会被对应的进行修改,当点击全选框的时候，会得到一个值
set(val) {
console.log('val', val)
this.arr.forEach((item) => (item.checked = val))
},
//2. 当单选全部选中的时候，全选框也会对应的进行选中，用到ES6的高级语法every
get() {
return this.arr.every((item) => item.checked)
}
}
}
}
</script>
<style>
</style>
监听器的基本使用
作用:监听数据属性值的变化(data,computed等等),需要使用配置项watch
<template>
<div><input type="text " v-model="name" />{{ name }}</div>
</template>
<script>
export default {
data() {
return {
name: 'xzq'
}
},
//监听器
watch: {
name(oldWal, newVal) {
console.log(oldWal, newVal)
}
}
}
</script>
<style>
</style>
深度监听和立即执行
immediate 立即监听
deep 深度监听
handler 固定方法触发
语法如下:
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
过滤器的使用
作用:把数据在展示前做格式转换
应用场景:日期格式的转换
<template>
<div>
<p>time:{{ time }}</p>
<p>time:{{ time | fDate }}</p>
</div>
</template>
<script>
import dayjs from 'dayjs'
export default {
data() {
return {
time: new Date()
}
},
filters: {
fDate(value) {
return dayjs(value).format('YYYY-MM-DD')
}
}
}
</script>
<style>
</style>
