vue项目积累知识点

vue 项目中 v-for循环取数组的前几个数据的方法

<div 
   v-for="(item, index) in articleList.slice(0,1)"
   :key="index"> {{index}}
    
</div>

vue 项目中 v-for循环取数组的后6个数据的方法

<div 
v-for="(item, index) in articleList.sliceitems.length-6,items.length"
     :key="index">
     {{index}}
</div>

vue项目 v-for循环的每个样式不一样

<div v-for="(item, index) in articleList :class="changeClass(index)" :key="index"></div>

methods:{
   changeClass(index){
   // 动态生成样式
   return `class_item-${index}`
   }
}

vue img动态绑定本地图片

<img :src="src">
computed:{
   src(){
     switch(n){
       case x:
       return require('图片地址')
       break;
       case y:
       return require('图片地址')
       break
     }
   }
}

v-html绑定值的写法

{{message.split('').reverse().join('') }}
{{ 1 == 1 ? 'YES' : 'NO' }}
{{number + 1}}

列表循环最后一个下滑线消失

<div v-for="(item,index) in List" :key="index">
   <div :class="index < list.length - 1 ? 'line' : ''"></div>
</div>
.line{
    border-bottom:1px solid red
}

事件做判断

@click="status ? getMore() : getLess()"

vue防短时间内，多次点击

// 第一种方法
<button @click="click()" :disabled="isDisabled"></button>
data(){
   return {
     isDisabled:false
   }
}
methods:{
  click(){
    this.isDisabled = true
    setTimeout(() =>{
       this.isDisabled = false
    },5000)
  }
}
// 第二种方法
<button @click="click()" v-preventReClick="5000"></button>
// 自定义指令index.js
export default {
  install(Vue){
    Vue.directive('preventReClick',{
      inserted(el,binding){
        el.addEventListener('click',()=>{
        if(!el.disabled){
          el.disabled = true
          setTimeout(()=>{
           el.disabled = false
          },binding.value || 2000)
        }
        })
      }
    })
  }
}
// main.js中引入index.js文件
import preventReClick from './index.js'
Vue.use(preventReClick)
// 第三种
<button @click.once="doSomeThing"></button>

关于elementui 中select选中值绑定为对象时，如何处理

<el-select v-model="provId" placeholder="请选择省" size="small" value-key="id">
     <el-option value="" label="全部"></el-option>
     <el-option v-for="item in provList" :key="item.id" :label="item.name" :value="item" >
     </el-option>
</ele-select>

value绑定的是对象时，在el-select 添加value-key="id"属性，el-option中添加:key="item.id"属性。其中value-key的值与key绑定的属性值对应。

不需要响应式的数据应该怎么处理？

有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了

// 方法一：将数据定义在data之外 
data () { 
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } 
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } 
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } 
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } 
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {} 
} 
// 方法二：Object.freeze() 
data () { 
  return { 
    list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), 
    list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), 
    list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), 
    list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), 
    list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), 
  } 
}

 为什么v-if和v-for不建议用在同一标签？

• Vue2中，v-for优先级是高于v-if的。 建议用computed

<div v-for="item in list"> {{item}} </div> 

computed() { 
list() { 
   return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3) 
  } 
}

或使用template标签

<template v-for="item in list">
    <el-input v-if=""></el-input>
</template>