<template>
<div>
<img v-for="(star,index) in stars" :src="star.src" @click="rating(index)" alt="星星圖片"/>
</div>
</template>

<script>
//星星的圖片路徑
// var starOffImg = "../../../static/images/OrderCenter/pinglun/wmwjx.png";
// var starOnImg = "../../../static/images/OrderCenter/pinglun/mwjx.png";

import starOffImg from '../../../static/images/OrderCenter/pinglun/wmwjx.png'; // import 引入圖片
import starOnImg from '../../../static/images/OrderCenter/pinglun/mwjx.png'; // import 引入圖片

export default {
data() {
return {
stars: [
{
src: starOffImg,
active: false
},
{
src: starOffImg,
active: false
},
{
src: starOffImg,
active: false
},
{
src: starOffImg,
active: false
},
{
src: starOffImg,
active: false
}
],
};
},
methods: {
//評(píng)分
rating: function (index) {
var total = this.stars.length; //星星總數(shù)
var idx = index + 1; //這代表選的第idx顆星-也代表應(yīng)該顯示的星星數(shù)量

//如果再次點(diǎn)擊當(dāng)前選中的星級(jí)-僅取消掉當(dāng)前星級(jí)，保留之前的。
if (idx == this.starNum) {
for (var i = index; i < total; i++) {
this.stars[i].src = starOffImg;
this.stars[i].active = false;
}
}
//如果小于當(dāng)前最高星級(jí)，則直接保留當(dāng)前星級(jí)
if (idx < this.starNum) {
for (var i = idx; i < this.starNum; i++) {
this.stars[i].src = starOffImg;
this.stars[i].active = false;
}
}
//如果大于當(dāng)前星級(jí)，則直接選到該星級(jí)
if (idx > this.starNum) {
for (var i = 0; i < idx; i++) {
this.stars[i].src = starOnImg;
this.stars[i].active = true;
}
}

var count = 0; //計(jì)數(shù)器-統(tǒng)計(jì)當(dāng)前有幾顆星
for (var i = 0; i < total; i++) {
if (this.stars[i].active) {
count++;
}
}
this.starNum = count;
}
},

}
</script>

<style scoped>

img{
width: 34px;
height: 32px;
margin-left: 32px;
}
</style>

轉(zhuǎn)載于:https://www.cnblogs.com/WangXinPeng/p/9413530.html

總結(jié)

以上是生活随笔為你收集整理的关于vue项目中在js中引入图片问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。