vue利用v-for循环时怎么只处理点击的那个元素
111，，，，
<div class="all">全部评论</div>
<textarea :placeholder="'已有'+data.pinglun+'条评论，快来说说你的'" @keyup.13="submit123($event)" class="replaycontent"></textarea>
<div class="fbjbox2">
<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
<div v-for="item in db" >
<div class="zce">
<img :src="item.head_url" class="man"/>
<div class="cont">
<h5>{{item.vname}}</h5>
<h4>{{item.content}}</h4>
<div class="mui-clearfix comment_end">
<span class="mui-pull-left">{{item.rtime|timeago}}</span> //发布评论的时间这里的timeago是一种时间filter过滤器，把时间换成距离现在多久的时间。
<span class="mui-pull-right" style="padding-left:20px;width:70px;display:inline-block"><img src="img/3.png" width="18px" @click="zanComment(item,$event)"/>{{item.zancount}}</span>
</div>
</div>
</div>
</div>
</pull>
</div>
</div>
//开始是浅色的图标。点击赞的时候，前面的图标换成深色的31.png。然后点赞的数量加1.
methods:{
zanComment(db,e){
var img=$(e.srcElement).attr("src");//指的就是当前的那个元素的src属性
if(img=="img/3.png"){ //如果还是没有点击的效果。点击以后先评论数加1再改变图片
db.zancount++; //db.xxxx就是这个点击的
$(e.srcElement).attr("src",'img/31.png'); }
}
}
}
222、、、
<ul class="mui-table-view" v-for="item in list">
<li class="mui-table-view-cell" @tap="link({id:item.goods_id})"> //跳转到指定页面根据这个图片的id
<a class="mui-navigate-right">
<img class="mui-pull-left img" :src="imgroot+item.goods_image"/>
<div class="mui-media-body">
<h4 >{{item.goods_name}}</h4>
<p class="red1">￥{{item.goods_price}}</p>
</div>
</a>
</li>
</ul>
methods:{
link(db){
this.$router.push({name:'商品详情'，params:{id:db.id,uid:localstorage.getItem('uid')}})//把内容传给商品详情的页面
}
}
下面是商品详情页面的js
mounted() {
this.$api("Mp/goodsDetail", {goods_id: this.$route.params.id }).then(obj => {}); //
在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动<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 = "测试";//这时会显示测试
}
}
});
<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 = "测试";//这时会显示测试
}
}
});
