vue 评价小星星

最新推荐文章于 2024-06-21 08:52:31 发布

小滕的腾

最新推荐文章于 2024-06-21 08:52:31 发布

阅读量104

点赞数 1

文章标签： css html5 vue.js

本文链接：https://blog.csdn.net/a1324837/article/details/130563633

版权

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .box{

      width: 600px;

      height: 500px;

      padding: 10px;

      border: 2px solid #e4393c;

      margin: 100px auto 0;

    }



    .title{

      text-align: center;

    }



    .rate{

      display: flex;

      align-items: center;

      justify-content: center;
    }
    .rate-title{
      font-weight: bold;
    }
    .rate-item{
      margin: 0 15px;
    }
    .rate-item{

      display: flex;

      align-items: center;

      margin-bottom: 10px;
    }
    .item{
      width: 24px;
      height: 24px;
      margin: 0 3px;
    }
    .count{
      font-weight: bold;
    }
    .auto-img{
      width: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box">
      <h2 class="title">商品评价</h2>
      <div class="rate" v-for="item in rateData">
        <div class="rate-title">{{item.title}}：</div>
        <div class="rate-item">
          <div class="item" v-for="(val, i) in item.initStar" @click="slelectStar(i, item)">
            <img class="auto-img" :src="item.count - 1 >= i ? './1.jpg' : './2.jpg'" alt="">
          </div>
        </div>
        <div class="count">{{item.count}}星</div>
      </div>
    </div>
  </div>
  <script src="./v2.js"></script>
  <script>
    new Vue({
      data: {
        //商品评价的数据
        rateData: [
          {
            title: '商品质量',
            initStar: 5,
            count: 0
          },

          {

            title: '客服服务',

            initStar: 5,

            count: 0

          },

          {

            title: '物流速度',

            initStar: 6,

            count: 0

          }

        ]

      },



      methods: {



        //选择星星

        slelectStar(index, item) {

          console.log('index ==> ', index);

          console.log('item ==> ', item);



          //判断本次是否点击星数和上一次一样的, 如果一样, 则取消选择星星

          if (item.count === index + 1) {

            item.count = 0;

            return;

          }



          item.count = index + 1;

        }

      }

    }).$mount('#app')



  </script>



</body>

</html>