1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  7.     .icons {
  8.         display: inline-block;
  9.         width: 20px;
  10.         height: 20px;
  11.         background: url("./star.png") no-repeat;
  12.         background-position: 0px 0px;
  13.         background-size: 100%;
  14.         /* background-color: burlywood; */
  15.     }
  17.     /* .icons:hover {
  18.         background-position: 0px -30px;
  19.     } */
  21.     .active {
  22.         background-position: 0px -30px;
  23.     }
  24. </style>
  26. <body>
  27.     <script src='./vue.js'></script>
  28.     <div id='myApp'>
  29.         <h1>平均分：{{myFen}} </h1>
  30.         <div>
  31.             <input 
  32.                 type="number" 
  33.                 v-for="item,i in score.length" 
  34.                 :key="i" 
  35.                 ref="item" 
  36.                 style="margin: 5px;" 
  37.                 v-model.number="score[i]"  
  38.                 min="0" max="5" 
  39.             >{{score}}
  40.         </div>    
  41.         <my-com1 
  42.             v-for="item,i in gradeList" 
  43.             :key="item"  
  44.             @mymark="getMark" 
  45.             :dataa="score[i]"
  46.             :index="i"
  47.         >
  48.             {{item}}
  49.         </my-com1>
  50.     </div>
  51.     <!-- 组件模板 -->
  52.     <template id='myTem'>
  53.         <!-- <div> -->
  54.         <ul>
  55.             <li style="list-style: none;">
  56.                 <slot></slot> : 
  57.                 <i 
  58.                     class="icons" 
  59.                     v-for="item,i in 5" 
  60.                     :class="item<=temp?'active':''"
  61.                     注释="鼠标悬停时,得到临时评分"
  62.                     @mouseenter="temp=item"
  63.                     注释="鼠标离开时,临时分数还原成真实分数"
  64.                     @mouseleave="temp=dataa"
  65.                     注释="点击星星时,得到真实评分"
  66.                     @click="bright(item)"
  68.                 ></i>
  69.                 <b style="color: coral;">{{dataa}} 分:</b>
  70.                 <!-- 评分是1-5 评价信息索引是0-4 刚好差了1 -->
  71.                 <strong>{{appraises[dataa-1]}} </strong>
  72.             </li>
  73.         </ul>
  74.         <!-- </div> -->
  75.     </template>
  76.     <script>
  77.         Vue.component('myCom1', {
  78.             template: '#myTem',
  79.             props: ["dataa", "index"],
  80.             data() {
  81.                 return {
  82.                     // temp是临时的分数,用于展示鼠标悬停时显示的分数
  83.                     temp: this.dataa,  
  84.                     appraises: ["非常差", "一般差", "还凑合", "一般好", "非常好"]
  85.                 }
  86.             },
  87.             methods: {
  88.                 bright(item) {
  89.                     console.log(item);
  90.                     // 再次强调,单向数据流限制,子组件千万不要直接改数据
  91.                     // this.$set(this.mark,this.dataa,item)
  92.                     // 要发自定义事件, 把数据传给父组件,由父组件改
  93.                     this.$emit("mymark", {
  94.                         mark: item,
  95.                         i: this.index
  96.                     })
  97.                 }
  98.             }
  99.         })
  100.         new Vue({
  101.             el: '#myApp',
  102.             data: {
  103.                 gradeList: ["商品评价", "物流评价", "客服评价", "快递小哥评价"],
  104.                 score: [1,2,3,4]
  105.             },
  106.             methods: {
  107.                 getMark(data) {
  108.                     console.log(data)
  109.                     // this.score[data.i] = data.mark
  110.                     this.$set(this.score, data.i, data.mark)
  111.                 }
  112.             },
  113.             mounted() {
  114.                 console.log(this.$refs.item) //有多个ref值相同的标签,会得到一个数组
  115.             },
  116.             computed: {
  117.                 myFen() {
  118.                     var fen = 0
  119.                     this.score.forEach(item => {
  120.                         fen += item * 1 / 4
  121.                     });
  122.                     return fen
  123.                 }
  124.             }
  125.         })
  126.     </script>
  127. </body>

star.png

父子组件间的双向绑定

  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  7.     .icons {
  8.         display: inline-block;
  9.         width: 20px;
  10.         height: 20px;
  11.         background: url("./star.png") no-repeat;
  12.         background-position: 0px 0px;
  13.         background-size: 100%;
  14.         /* background-color: burlywood; */
  15.     }
  17.     /* .icons:hover {
  18.         background-position: 0px -30px;
  19.     } */
  21.     .active {
  22.         background-position: 0px -30px;
  23.     }
  24. </style>
  26. <body>
  27.     <script src='./vue.js'></script>
  28.     <div id='myApp'>
  29.         <h1>平均分：{{myFen}} </h1>
  30.         <div>
  31.             <input 
  32.                 type="number" 
  33.                 v-for="item,i in score.length" 
  34.                 :key="i" 
  35.                 ref="item" 
  36.                 style="margin: 5px;" 
  37.                 v-model.number="score[i]"  
  38.                 min="0" max="5" 
  39.             >{{score}}
  40.         </div>    
  41.         <my-com1 
  42.             v-for="item,i in gradeList" 
  43.             :key="item"  
  44.             注释='@input="getMark" 
  45.             :value="score[i]"
  46.             :index="i" '
  47.             注释="@input和:value实现了v-model, 所以以上对input自定义事件的绑定和对value自定义属性的绑定,可以简化为v-model"
  48.             v-model="score[i]"
  49.         >
  50.             {{item}}
  51.         </my-com1>
  52.     </div>
  53.     <!-- 组件模板 -->
  54.     <template id='myTem'>
  55.         <!-- <div> -->
  56.         <ul>
  57.             <li style="list-style: none;">
  58.                 <slot></slot> : 
  59.                 <i 
  60.                     class="icons" 
  61.                     v-for="item,i in 5" 
  62.                     :class="item<=temp?'active':''"
  63.                     注释="鼠标悬停时,得到临时评分"
  64.                     @mouseenter="temp=item"
  65.                     注释="鼠标离开时,临时分数还原成真实分数"
  66.                     @mouseleave="temp=value"
  67.                     注释="点击星星时,得到真实评分"
  68.                     @click="bright(item)"
  70.                 ></i>
  71.                 <b style="color: coral;">{{value}} 分:</b>
  72.                 <!-- 评分是1-5 评价信息索引是0-4 刚好差了1 -->
  73.                 <strong>{{appraises[value-1]}} </strong>
  74.             </li>
  75.         </ul>
  76.         <!-- </div> -->
  77.     </template>
  78.     <script>
  79.         Vue.component('myCom1', {
  80.             template: '#myTem',
  81.             props: ["value"],
  82.             data() {
  83.                 return {
  84.                     // temp是临时的分数,用于展示鼠标悬停时显示的分数
  85.                     temp: this.value,  
  86.                     appraises: ["非常差", "一般差", "还凑合", "一般好", "非常好"]
  87.                 }
  88.             },
  89.             methods: {
  90.                 bright(item) {
  91.                     console.log(item);
  92.                     // 再次强调,单向数据流限制,子组件千万不要直接改数据
  93.                     // this.$set(this.mark,this.dataa,item)
  94.                     // 要发自定义事件, 把数据传给父组件,由父组件改
  95.                     // this.$emit("input", {
  96.                     //     mark: item,
  97.                     //     i: this.index
  98.                     // })
  100.                     // v-model绑定后, item会被直接赋值到 score[i]
  101.                     this.$emit("input", item)
  102.                 }
  103.             }
  104.         })
  105.         new Vue({
  106.             el: '#myApp',
  107.             data: {
  108.                 gradeList: ["商品评价", "物流评价", "客服评价", "快递小哥评价"],
  109.                 score: [1,2,3,4]
  110.             },
  111.             methods: {
  112.                 // getMark(data) {
  113.                 //     console.log(data)
  114.                 //     // this.score[data.i] = data.mark
  115.                 //     this.$set(this.score, data.i, data.mark)
  116.                 // }
  117.             },
  118.             mounted() {
  119.                 console.log(this.$refs.item) //有多个ref值相同的标签,会得到一个数组
  120.             },
  121.             computed: {
  122.                 myFen() {
  123.                     var fen = 0
  124.                     this.score.forEach(item => {
  125.                         fen += item * 1 / 4
  126.                     });
  127.                     return fen
  128.                 }
  129.             }
  130.         })
  131.     </script>
  132. </body>