Vue里用了mouted和updated还是取不到已定义的$refs

Question

这是获取到的$refs和refs.con

我想在VUE里做一个点击不同的按钮出现不同背景图片的效果
不用自己操作DOM
但是不知道怎么能在子类的点击事件里拿到父类的属性并修改
还是能有别的方法来完成这个效果
谢谢各位大佬

Answer 1

vue文件内

<div :class="{classFlag ? 'red' : 'blue'}" @click="changeClass">

js文件内

changeClass () {
    this.classFlag = !this.classFlag
}

scss文件内

div {
    &.blue {
        background: blue;
    }
    &.red {
        background: red;
    }
}

---

或者你可以通过绑定style来完成

---

五种背景

vue文件内

<div :class="showClass">
<button @click="changeClass(1)"></button>
<button @click="changeClass(2)"></button>
<button @click="changeClass(3)"></button>
<button @click="changeClass(4)"></button>
<button @click="changeClass(5)"></button>

js文件内

changeClass (i) {
    this.classFlag = i
}
showClass (i) {
    switch (this.classFlag) {
        case 1:
            return 'one'
        case 2:
            return 'two'
        case 3:
            return 'three'
        case 4:
            return 'four'
        case 5:
            return 'five'
        default:
            break
    }
}

scss文件内

div {
    &.one{
        background: blue;
    }
    &.two {
        background: red;
    }
    &.three {
        background: white;
    }
    &.four{
        background: black;
    }
    &.five{
        background: pink;
    }
}