vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素?

Question

            <div class="msghead" v-for="item in msgs">
                <div class="logo">
                    <img :src="item.imgsrc" alt="logo">
                </div>
                <div class="intro">
                    <h3 class="name">{{item.name}}</h3>
                    <p>{{item.msg}}</p>
                </div>
                <div class="zan">
                    <p @clik="focusFun">关注</p>
                </div>
            </div>

        data: function () {
            return {
                msgs:[]
            }
        },
        methods: {
            focusFun: function (event) {
                
            }
        }

怎么才能通过点击focusFun 为当前的p标签 添加一个.focus类样式?

Answer 1

从数据结构着手，做关注的话，你的数据中得有关注这个字段

data: function () {
    return {
        msgs: [] // [{focus: true}]
    }
},
methods: {
    focusFun: function (msg) {
        msg.focus != msg.focus; // 切换 关注 状态
    }
}

然后调整下html

<div class="zan">
    <!-- 1. 将item传进去 -->
    <!-- 2. 根据focus字段设置class -->
    <p :class="[item.focus ? 'focus' : '']" @clik="focusFun(item)">关注</p> 
</div>

Answer 2

methods: {
    focusFun: function (e) {
        e.target.className="focus";
    }
}