html - vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素?
本文介绍了html - vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<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类样式?
解决方案
从数据结构着手,做关注的话,你的数据中得有关注这个字段
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>
这篇关于html - vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文