vue基础 动态class 动态style 计算属性computed 侦听器 品牌管理案例

1.动态class

 

用v-bind给标签class设置动态的值

语法:

• :class="{类名: 布尔值}"

2.动态style

给标签动态设置style的值

语法

:style="{css属性名:值}"

案例

格式化时间

1. 下载moment处理日期的第三方工具模块

   moment官网文档: 文档 | Moment.js 中文网

   yarn add moment
   

2. 定义过滤器, 把时间用moment模块格式化, 返回我们想要的格式

// 目标: 处理时间
// 1. 下载moment模块
import moment from 'moment'


// 2. 定义过滤器, 编写内部代码
formatDate (val){
    return moment(val).format('YYYY-MM-DD')
}

<!-- 3. 使用过滤器 -->
<td>{{ formatDate(obj.time)}}</td>

3.计算属性

 computed:{

    计算属性名(){

      return xxx

    }

  }

  计算属性 我们写的是函数 但是 在莫办理当 变量使用

  计算属性的名字不要和data里面 的变量 重名

  计算属性 本质就是 变量

  计算属性 :一个变量 由 其他的变量计算的得到

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

<template>
  <div>
<p>总和是{{sum}}</p>
<!-- sum为变量不要加() -->
  </div>
</template>
<script>
export default {
data() {
  return {
    a:10,
    b:20
  }
},
computed:{
  /*
  computed:{
    计算属性名(){
      return xxx
    }
  }
  计算属性 我们写的是函数 但是 在莫办理当 变量使用
  计算属性的名字不要和data里面 的变量 重名
  计算属性 本质就是 变量
  计算属性 :一个变量 由 其他的变量计算的得到
  */
sum(){
  return this.a+this.b
}
}
}

</script>

<style>

</style>

 计算属性和方法的区别

计算属性有缓存  在值不变时调用的是缓存的值

方法没有缓存

总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

4.计算属性完整写法

computed：{
'属性名'：{
set（值）{
}，
get（）{
 return '值' 
  }
 }
}

1. 给计算属性变量赋值时 使用完整写法

 set函数和get函数什么时候执行 

1. set接收要赋予的值
2. get里要返回给这个计算属性具体值

案例 小选影响全选

实现思路

1. v-model给全选框绑定isAll计算属性
2. isAll计算属性里返回统计小选框选中状态结果

<template>
  <div>
    <span>全选:</span>
    <!-- 4. v-model 关联全选 - 选中状态 -->
    <input type="checkbox" v-model="isAll"/>
    <button>反选</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <!-- 3. 对象.c - 关联 选中状态 -->
        <input type="checkbox" v-model="obj.c"/>
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 目标: 小选框 -> 全选
// 1. 标签+样式+js准备好
// 2. 把数据循环展示到页面上
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  // 5. 计算属性-isAll
  computed: {
    isAll () {
         // 6. 统计小选框状态 ->  全选状态
        // every口诀: 查找数组里"不符合"条件, 直接原地返回false
        return this.arr.every(obj => obj.c === true)
    }
  }
};
</script>

全选影响小选

1. 小选框v-model, 关联数组里对象的c属性
2. isAll计算属性的set方法, 拿到全选框状态
3. 状态值赋给, 数组里每个对象的c属性

<script>
export default {
  // ...其他代码
  // 5. 计算属性-isAll
  computed: {
    isAll: {
      set(val){
        // 7. 全选框 - 选中状态(true/false)
        this.arr.forEach(obj => obj.c = val)
      },
      get(){
        // 6. 统计小选框状态 ->  全选状态
        // every口诀: 查找数组里"不符合"条件, 直接原地返回false
        return this.arr.every(obj => obj.c === true)
      }
    }
  }
};
</script>

5.vue侦听器- watch

可以侦听data/computed属性值改变

watch: {
	"被侦听的属性名" (newVal, oldVal){
	
    }
}

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

深度侦听

侦听复杂数据类型内变化

watch：{
deep：true，
handler（newVal，oldVal）{
 }
}

   v-for更新监测