前端日常笔记

1.CSS calc() 函数

calc() 函数用于动态计算长度值。

运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则

2. Vue.set( target, propertyName/index, value )

    addclick() {
      if (!this.numlik.count) {
        Vue.set(this.numlik, "count", 1); //例如点餐应用中，餐品从无到1数字的显示，触发视图更新
      } else {
        this.numlik.count++;
      }
    }

3.v-bottom-sheet API

类似轻量UI组件库，可以只利用其快速api完成自己需求化的组件

// 组件定制内容由你自己设计，但是外层控制这个bottom是否显示快速交给v-model="visible"，有value为布尔值传到最外层v-bottom-sheet来快速完成可见和隐藏的决定。
//父组件的监听事件是input，这个在v-dialog中有说明，但是在v-bottom-sheet中没有。
  props: {
    value: Boolean,
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  }