在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ img的src如何綁定v-for循環(huán)的變量值?

img的src如何綁定v-for循環(huán)的變量值?

1.現(xiàn)有一v-for循環(huán),輸出每個對象comment,comment用element卡片組件分別輸出其各個屬性值
2.comment有一屬性comsimghead存放圖片名稱,首先用v-if判斷是否為空,若為空,img src="../images/head/head.jpg",這個沒有問題,但是不為空怎么讓src為"../images/head/"+comsimghead呢?(實現(xiàn)全部轉換太麻煩,并且轉換為后src=后面也不能寫變量值啊,還得在data聲明變量)
3.代碼如下:

            <el-col :span="12" v-for="comment in currentcomments" :key="comment.comid" :offset="1" style="margin-bottom:40px">
                    <el-card :body-style="{ padding: '0px', height:'200px'}" style="width: 800px;height: 200px;">
                        <div style="padding: 6px;height: 180px;">
                            <div style="height:50px;"><!--頭像與用戶名-->
                                <div style="float: left;width: 50px;height: 50px;" v-if="comment.comsimghead ==null || comment.comsimghead ==''">
                                    <img src="../images/head/head.jpg" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />
                                </div>
                                <div style="float: left;width: 50px;height: 50px;" v-else><!--這里的src怎么設置?-->
                                    <img src="../images/head/" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />
                                </div>
                                <div style="float: left;position:relative;top:20px;width:300px;height: 30px;"><font size="5">&nbsp;{{comment.comsname}}</font></div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
回答
編輯回答
尐潴豬

不需要使用v-if,v-else

<div style="float: left;width: 50px;height: 50px;">
     <img :src='comment.comsimghead?"../images/head/head.jpg":("../images/head/"+comsimghead)' style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />
</div>
2017年10月31日 01:08
編輯回答
澐染

直接這樣寫就行: :src="comment.xxx" 綁定方式是這樣,其它的判定可以自己添加

2017年3月6日 12:56
編輯回答
忠妾
<img :src="'../images/head/'+comment.comsimghead" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />
2017年12月28日 23:49