Vue 的 computed、filters、watch

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

07- v-model 表单绑定

1. • 普通文本框: input type texe
2. • 单选框: redio
3. • 多选框: type= "checkbox"
4. 多行文本框:
5. 下拉列表: select => option

  <div>
    <!-- 普通 -->
    <p>
    用户名: <input v-model="nuername" type="text">
    </p>
    <!-- 单选框 -->
    <p>
    性别: 
    男: <input v-model="esx" value="男" type="radio" name="agg">
    女: <input v-model="esx" value="女" type="radio" name="agg">
    </p>
    <!-- 多选框 -->
    <p>
    打球: <input v-model="multiple" value="打球" type="checkbox">
    打人: <input v-model="multiple" value="打人" type="checkbox">
    打豆豆: <input v-model="multiple" value="打豆豆" type="checkbox">
    </p>
    <!-- 下拉框 -->
    <div class="index">
      <span>来自于哪里?</span>
      <select v-model="from">
        <option value="西安">陕西-西安</option>
        <option value="燕京">北京-燕京</option>
        <option value="大连">辽宁-大连</option>
      </select>
    </div>
    <p>
    <!-- 多行文本框 -->
      <textarea v-model="info"></textarea>
    </p>
  </div>

  data() {
    return {
      info:'',
      multiple: [],
      username:'小顾',
      esx:'男'
    };
  },

08- v-model 的修饰符 用法: <input v-model.修饰符="">

1. .number : 用于把类似于密码之类的输入字符转换为数字类型
2. .trim : 可以去除首位的空白字符
3. .lazy : 在失去焦点的的时候触发, 才会同步到 model 的双向绑定

09- 动态绑定 class

1. 在 class 前面添加 : (v-bind) 在里面添加同态的类名 <p :class="[clli]">我是动态设置的样式</p>

data() {
  return {
    clli: {
    cll:true,
    clli:true,
    }
  };
},

.cll{

background: red;
}
.clli{
font-size: 50px;
}

010- 动态绑定 style

1. 得使用驼峰命名 <p :style="list">难搞啊</p>

data() {
  return {
    list:{
      background: 'pink'
    }
  };
},

11- computed 计算属性

1. 完整写法 只要是获取值的时候就使用 set , 如果时获取那么就用 get computed 有较好的缓存机制, 对于业务的性能有更高的支持
2. 应用场景 购物车的反选 全选

  All:{
    set(val) {
      // 修改
      console.log('val', val);
      this.arr.forEach(item => {
        item.checked =val
      })
    },
    get () {
      // 获取
      return this.arr.every(item => {
        return item.checked === true
      })
    }
  }

12- filters 过滤器的使用

1. filters

  <td>{{ item.time| fn}}</td>

  filters: {
  fn(value) { // 传入的 value 就是插值的需要过滤的参数, html 处的第二个参数就是返回值
    // 格式网上一大把
    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
  }
}

13- watch 监听属性的应用

1. 应用场景: 监听数据的变化存储到本地...

// 取出存储的数据转换为对象属性的数据, 然后渲染数据
list: JSON.parse(localStorage.getItem('list')) || []

watch: {
  // 侦听器, 用于本地存储
  "list" :{
    // immediate: true, // 立即执行
    deep: true, // 是否开启深度监听, 也就是侦听复杂数据类型
    handler(newVal,oldVal) {
      // newVal 新值; oldVal 老值
      console.log(newVal);
      console.log(oldVal);
      // 存储到本地, (setItem ) ('属性名', 需要储存的属性值, 需要转换为字符串格式)
      localStorage.setItem('list',JSON.stringify(newVal))
    }
  }
}