ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue常用的一些方法

2022-01-14 14:58:00  阅读:161  来源: 互联网

标签:index 常用 vue return price arr num 数组 方法


vue中数组的相关应用

一:v-for中的key属性

作用:
如果是index作为key,在中间插入新节点,则后面的位置都变了,都会重新更新节点
如果加入key,每一个都是唯一的,在中间插入新节点,只会更新中间的节点
好处:
为了更高效地更新虚拟dom

二:计算总和(js)

reduce方法的使用

let arr=[1,2,3,4]
arr=arr.reduce(function(pre, current){
    return pre+current
})
// 1+2+3+4

三:计算属性

1.计算属性里面的属性值不用在data中定义也可以直接用
2.必须要有返回值
3.当依赖的data属性发生变化时,会重新计算
4.有缓存作用,没有改变值的情况下缓存读取

四:数组常用的一些方法

var arr = [1, 2, 3]
// 往数组最后一位添加一个数字
arr.push(4) // [1, 2, 3, 4]
// 删除数组最后一个数字
arr.pop()   // [1, 2, 3]

// 往数组第一位添加一个数字
arr.unshift(0)
// 删除数组第一个元素
arr.shift()

// splice
// 删除第一个元素
array.splice(index, howmany, item1, ....., itemX)
// index从index开始删,howmany删除几个,item1后面都是加的
arr.splice(1, 2) 

// 相当于截取,返回指定索引的范围内
arr.slice(1,2)
// 返回1,2

// 合并数组
[1, 6].concat([5, 7])
arr=[...arr,[5,7]]

数组的方法

1:map方法

有多少长度就返回多少长度,一般我是用来组合数据格式的

let arr=[1,2,3,4,5]
    let arr2=arr.map(item=>{
      return item==1
    },0)
    // 返回[true,false,false,false,false]
    console.log('map返回',arr2)

2:filter

1.用来过滤符合条件的数据的数组
2.不能对其数据作出改变
3.返回的数据还是原来的,只是过滤了一下
4.后面的0表示作为第一次调用callback的第一个参数

 let arr=[1,2,3,4,5]
    let arr2=arr.filter(item=>{
        item=9
      return item
    },0)
    // 返回[1,2,3,4,5]
    console.log('filter',arr2)

3:数组去重

var arr = ['qw', '2', '3ty', '1', 'er', '2', 'qw']
// 1.可以使用es6的方法去重
 Array.from(new Set(arr))

//  2.循环去重数组,push到一个新数组里,然后每次循环都查找新数组是否存在该数据,没有则push进去,有的忽略
 var newArray = [];
    for(var i=0; i<arr.length; i++){
        if(newArray.indexOf(arr[i])==-1){
            newArray.push(arr[i])
        }
    }

//3.把标记放到一个新对象里,每次查找这个对象是都有这个属性,如果有,则忽略,没有则忘对象添加新属性,往数组添加新的值
var newArray2 = [];
    var obj = {};
    for(var i=0; i<arr.length; i++){
        if(!obj[arr[i]]){ 
            obj[arr[i]] = arr[i]
            newArray2.push(arr[i])
        }
    }

vue的过滤器和全局过滤器

1:过滤器的使用

1.之前看到的是js的过滤,是用来过滤数组的
2.现在的过滤是vue的过滤器(显示内容换了,但不改变字段值)
{{ 变量名 | 过滤器名 }}
{{ num | formatNum }}
3.和data同级
4.可以用来处理日期的显示
5.可以是组件过滤器,也可以是全局过滤器(多文件使用)

data:{
        num:10
    },
    filters:{
        formatNum(val){  
            return val + 50  //return的值就是显示的值
            }
    }

图书购买的例子

<template>
  <div>
    <div id="app">
      <table border="1" cellpadding="23" style="padding:10px">
        <thead>
          <tr>
            <th v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in books" :key="item.name">
            <td>{{index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.date}}</td>
            <td>
              <button style="padding:0 10px" @click="sub(index)">-</button>
              <strong style="margin:0 10px">{{item.num}}</strong>
              <button style="padding:0 10px" @click="add(index)">+</button>
            </td>
            <td>
              <button style="padding:0 10px" @click="remove(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h3 style="display:flex;margin-top:10px">总价格:{{total}}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: ["编号", "书籍名称", "价格", "出版日期", "数量", "操作"],
      books: [
        {
          name: "数学",
          date: "2006-9",
          price: 85,
          num: 1
        },
        {
          name: "英语",
          date: "2006-2",
          price: 59,
          num: 1
        },
        {
          name: "地理",
          date: "2008-10",
          price: 35,
          num: 1
        },
        {
          name: "语文",
          date: "2006-3",
          price: 66,
          num: 1
        }
      ]
    };
  },
  created() {},
  methods: {
    add(index) {
      this.books[index].num++;
    },
    sub(index) {
      if (this.books[index].num) {
        this.books[index].num--;
      }
    },
    // 移除方法
    remove(index) {
      // 修改 增加 删除(下标, 删除数量, .....增加的元素)
      this.books.splice(index, 1);
    }
  },
  // 计算属性
  computed: {
    total() {
      // 像这种要算对象里面的,就要设置初始值,否则第一个初始值就是一个对象就会报错
      // return preTotal.price*current.price + current.price * current.num;
      //如果是上面这样写就会返回NaN,因为上一次计算的结果是一个数值,因为数值不是对象,拿不出price和num
      return this.books.reduce((preTotal, current) => {
        return preTotal + current.price * current.num;
      },0); //总价格
    }
  }
};
</script>

<style lang="scss" scoped>
 table {
    th {
      padding: 10px 20px;
    }
    td{
      padding: 10px;
    }
  }
</style>

效果图

在这里插入图片描述

标签:index,常用,vue,return,price,arr,num,数组,方法
来源: https://blog.csdn.net/panpan2316872469/article/details/122494523

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有