vue2笔记

if(0) ==> false 假、不执行

 if条件渲染   使用key

这两个元素是完全独立的，不要复用它们。只需添加一个具有唯一值的 key

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input" />
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input" />
</template>

 这样的话，每次点击切换时，输入框都将会被重新渲染

但是label元素会被复用，因为他们没有添加唯一的key值

vue2中 v-for优先级高于v-if 在vue3中刚好相反

列表渲染 — Vue.js (vuejs.org)https://v2.cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E7%BB%93%E6%9E%9C

修改表格颜色

:cell-style="columnStyle"

<el-table :show-header="false" :data="tableData" border style="width: 1200px;" :cell-style="columnStyle">
      <el-table-column width="200">
           <template slot-scope="scope">
                  <span style="margin-left: 10px">企业类型</span>
            </template>
      </el-table-column>
<el-table>

// 自定义列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
    // console.log(column, rowIndex, columnIndex);
    if ((columnIndex == 2 && rowIndex == 0) || (columnIndex == 0 && rowIndex == 0) || (columnIndex == 4 && rowIndex == 0)) {
    //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
    } else {
        return "background:#ffffff;";
    }
}

去除所有标签

replace(/<[^>]+>/g, '')

去除前后标签

正则 去除前后标签
.replace(/<\/?.+?\/?>/g, '')

双击

@dblclick

输入框enter事件

@keyup.enter.native

省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

设置高度的省略号 

-webkit-line-clamp: 2;     两行的高度

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

滚动条

滚动条
overflow-x:hidden;

左右都出现滚动条
overflow-y: auto

滚动条样式

圆滑的滚动条 可以调价宽度，圆角大小，颜色等

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    cursor: pointer;
} 
::-webkit-scrollbar-thumb {
    background: linear-gradient(270deg, #eeeeee, #d8d8d8);
    border-radius: 5px;
    cursor: pointer;
}

三木运算符  添加class

:class="[checkbool == true ? 'activeshow' : '']"

以数组的形式动态添加样式class

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }">
</div>



data: {
  isActive: true,
  hasError: false
}

最终显示效果
<div class="static active"></div>

或者使用计算属性
<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

监听

latlist: {
    handler(newval, oldval) {
         newval, oldval
    },
    immediate:true,
    deep:true
}

若在mounted()打印不出data的数据

要考虑this的问题 (vue2中)

let that = this

 限制输入框字符

限制字符
<el-input v-model="text" @input="lenMin(text)" :maxlength="20"></el-input>

// 最小限制字符
lenMin(text) {
// 添加一个标识 flag ，满足条件后将flag 改变，并return中断判断
   let flag = true
   text.trim()
   if (flag && text.length >= 20) {
      this.$message.error('最大不超过20个字符')
      flag = false;
    } else {
      return
    }
}

调用数据 key值是一串数字时

data['312103022211A511']

早期webpack配置跨域

获取url的后缀名

.match(/\.([^\.]+)$/)[1]

若依系统配置菜单之后存在缓存

RuoYi(若依)平台页面缓存无效_若依 路由缓存失效_小龙人0617的博客-CSDN博客https://blog.csdn.net/qq_40015409/article/details/118795651

将页面中的name改成小写和文件名保持一致

Vue组件中name的三大作用_vue name-CSDN博客https://blog.csdn.net/weixin_45811256/article/details/109498407

if语句中写入函数 

<template v-if="isShowBtn(scope.row)">
     <el-button type="text" icon="el-icon-printer" size="mini">打印
     </el-button>
</template>

// 函数
isShowBtn(row) {
      if (row.contractStatus == '3' && row.contractApproveStatus == '2' && row.contractStampedStatus == '1') {
        return true
      }

      return false
}


或者

if (isShowBtn(item)) {
     flag = true
}

 el-tooltip 长度大于10 就悬浮出所有字体

<el-tooltip effect="dark" placement="top">
    <span slot="content">{
  { item.name}}</span>
    <span class="rightinput"
         v-if="item.name.length >= 10">  
         {
  { item.name}}
    </span>
</el-tooltip>

<span v-if="item.name.length < 10" 
      class="rightinput">
    {
  { item.name}}
</span>

若是在表格中

当内容过长被隐藏时显示 tooltip

事件修饰符

.capture

添加事件监听器时使用事件捕获模式
即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis"></div>

.passive 

滚动事件的默认行为 (即滚动行为) 将会立即触发

滚动事件的默认行为 (即滚动行为) 将会立即触发
而不会等待 `onScroll` 完成
这其中包含 `event.preventDefault()` 的情况
<div v-on:scroll.passive="onScroll"></div>

 .prevent

阻止事件的默认行为

.exact

修饰符允许你控制由精确的系统修饰符组合触发的事件

即使 Alt 或 Shift 被一同按下时也会触发
<button v-on:click.ctrl="onClick"&