Question

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

Answer 1

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动

<h1>{{obj.name}}</h1>

<h2>{{obj.prop}}</h2>
<script src="../Scripts/vue.js"></script>
<script>
$(function () {
alert(1);
});
var vue = new Vue({
el: 'body',
data: {
//初始obj是空的，因此视图默认是什么都没有
obj:{}
},
ready: function () {
//这里是vue初始化完成后执行的函数
this.obj.name = "对象名字";//这时会显示name
},
methods: {
//这里是自定义的方法
setProp: function () {
this.obj.prop = "测试";//这时会显示测试
}
}

});

Answer 2

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

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 元素添加dom元素的方法：

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>