Vue 技巧

有些傻话，不但是要背着人说，还得背着自己。让自己听见了也怪难为情的。譬如说，我爱你，我一辈子都爱你。

1、Vue 获取当前点击元素的父元素，当前点击元素的父元素的所有子元素，循环中的第几个元素

<div class="publishimg clear" v-show="item.postimageArr != null && item.postimageArr.length>0">
    <img  :src="value" alt="" @click = "imgClick($event,num)"  v-for="(value,num) in item.postimageArr" :key="num"
         :class="{releaseimg : item.postimageArr.length >= 2 ? true : false}">
</div>

 methods: {
        imgClick:function (e,num) {
            console.log("当前是第几个："+num) 
            console.log(e.target.parentNode) //获取当前点击元素的父元素
            console.log(e.target.parentNode.childNodes) //当前点击元素的父元素的所有子元素
            // e.target //是你当前点击的元素
            // e.currentTarget //是你绑定事件的元素
            var imgs = e.target.parentNode.childNodes;
            for(var  i=0;i<imgs.length;i++){
                console.log(imgs[i].currentSrc) //获取某一属性值，这里的是图片的 url 
            }
        },
    }

2、Vue 的 main.js 操作 Vuex 中的值

import store from './store'//引入store，这个是自己写的

store.dispatch('modifyTabbarUrl',to.fullPath)
// store.dispatch('action中的方法名' , '参数');

3、vue 中判断值相等的时候使用“===”三个等于号的，因为数值的判断 0 = “” 是成立的，所以需要用三个等于号

4、

<!-- vue 中变量加字符串的时候，要用冒号，代表引用的是变量，单引号代表字符串，然后使用 + 号拼接，变量不用改直接使用 -->
<img :src="'..'+item.picture_url" class="pt-img" v-show="item.picture_url != null" >

5、

// 字符串的拼接最后都用单引号的，不要使用双引号的，毕竟下面这个用双引号一直获取不到值
// 有时候那些值获取不到的时候可以打断点，然后鼠标移动过去，看看有没有自己需要的值，比如，断点之后，查看 this.$refs
var te = 'uploadFileTes'+res.re_data
this.$refs[te][0].clearFiles();

6、vue 数据不更新的原因

Vue.set(this.formData.rate_set[this.classDataIndex],"picture_url",res.url);

7、vue 引入外部 js 资源文件答：一般是放在 static 文件夹，在 index.html 中引入

月下陈铨

Vue 技巧

Search

Table of Contents