Vue 新特性

1.计算属性

/*
<tr>
        <td colspan="6">{{totalCount}}件商品，总计（不含运费）：{{totalPrice | priceFilter(2)}}</td>
</tr>
*/
computed: {
//模糊查询 
 //<tr v-for="(v,k) in searchData" :key="k"></tr>
    searchData: function () {
      if (!this.input) return this.items;
      return this.items.filter((item) => {
        return item.name.indexOf(this.input);
      });
    },
  totalPrice: function () {
      //计算总的金额
      this.items.reduce((total, cur) => {
        return (total += cur.count * cur.price);
      }, 0);
    },
    totalCount: function () {
      //计算总的数量
      // 方法1.forEach遍历
      // var n = 0;
      // this.items.forEach((item, index) => {
      //   n += item.count;
      // });
      // return n;

      // 方法2.reduce() 累加器
      return this.items.reduce(function (total, cur) {
        return (total += cur.count);
        /* var items = [
          { name: "百香果", price: 6.2, count: 3 },
          { name: "苹果", price: 3.2, count: 0 },
          { name: "柠檬", price: 32, count: 5 },
          { name: "橙子", price: 6.2, count: 1 },
          { name: "西瓜", price: 6.2, count: 2 },
        ];*/
      }, 0);
    },
  },

indexOf reduce详细说明

//筛选  filter()
"hello world".indexOf('w'); //满足 返回下标，不满足返回-1
"hello world".includes("e") //匹配成功返回true   false
var arr = ["asx", "avf", "xsw", "fer", "grh"];
var a = arr.filter((item) => {
  return item.indexOf("a" != -1);
});
console.log(a); //(5) ["asx", "avf", "xsw", "fer", "grh"]

//reduce() 累加器
 var arr = [1, 2, 3, 4, 5, 6];
      var a = arr.reduce(function (total, cur) {
        //初始值 和 计算结束后的返回值    cur 当前元素
        return (total += cur);
      }, 10); //初始化
      console.log(a); //31

2.过滤器

filters: {
    //过滤器的作用是 文本格式化
    priceFilter: function (data, n) {
      return "￥" + data.toFixed(n);
    },
  },

3.实例属性和方法

4.$set

5.$delete

$watch

$ref