<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: {
//評分
rating: function (index) {
var total = this.stars.length; //星星總數
var idx = index + 1; //這代表選的第idx顆星-也代表應該顯示的星星數量

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

var count = 0; //計數器-統計當前有幾顆星
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>

轉載于:https://www.cnblogs.com/WangXinPeng/p/9413530.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。