vue使用心得笔记

1.vue做if判断的时候 , 由于使用了v-for循环 做个别标签判断的时候 使用了 v-if="{{item.code}}==1" 报错了,检查发现,在v-if中不能用插值表达式 , 可以直接写 v-if="item.code==1" 然后成功实现 ; .

2.vue绑定元素背景图图片链接的时候 如何拼接的问题

<div style="width:50px;height:50px;border-radius:50%;" v-if="avatar" :style="{'background':'url('+avatar+') no-repeat center center','background-size':'cover'}"></div>

需要把style后边的样式用大括号包起来,分开隔成字符串 , 多个background样式直接用逗号分隔即可。

3.vue页面由多个组件组成，想要刷新某一个组件（具体是修改头像，在主页中同步修改）

在改组件 <bar v-if="status" /> 用v-if判断，status默认是true 根据传过来的值

data:{ status:true }
 
// 先把状态设置为false 使用$nextTick方法紧接着重新赋值为 true 实现了
 
this.status = false
this.$nextTick(function() {
   this.status = true
})

4.forEach 进行循环操作，加入if判断时，赋值操作不生效的问题

一般都是this指向造成的，可以在forEach之前声明一下this指向就可以解决了。如果遇到双动态的，则不成功

5.一些默认的组件 点击事件不生效 需添加.native监听

例如：下拉组件

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click="showDialog">黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
</el-dropdown-menu>
// click点击事件不生效
 
// 需要添加.native后生效 （.native 就是监听根元素的原生事件，然后给自定义组件添加原生事件）
<el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="showDialog">黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
</el-dropdown-menu>

6.elment ui table组件 多选事件监听

默认多选可点击 thead栏复选按钮切换，其他自定义事件监听可直接调用clearSelection()事件。

this.$refs.multipleTable.clearSelection() // 调用取消或者选中

持续更新，未完待续。。