辛巴的2020年Vue全套教程 学习笔记P4 指令的使用 评分小星星

在b站听《辛巴的2020年Vue全套教程》想着听完课记录一下学习笔记方便自己复习~

iconfont获取小星星

• 1.首先通过iconfont网站选择两个小星星的图标，添加到项目中，获取地址

• 

  iconfont获取地址

• 2.引用到页面中

注意！
- 这个link 要写在style 的前面，不然会覆盖后面的css样式，我就是写在style 后面导致i 标签调试半天也没有改变大小
- 还有地址前面要加上https，不加也是会报错找不到的

• 3.在页面中写星星
  需要注意的是class中的三个值分别是
  • iconfont[必填]
  • icon-star[你刚刚选的星星名字]
  • star[我后面调整星星的样式和颜色用的]

• 4.给星星放大和加颜色
  • 星星的大小是 用字体来调整的
  • 如果想给星星加宽高，需要提前给星星加display:inline-block 否则直接加宽高无效

 .star{
           font-size: 60px;
           color: gold;
       }        

效果

• 

  星星图片

使用vue指令调整多少分

观察上图可以发现，我这是实现了20个星星得10分的效果，
那我只需要设置前几颗星星的样式就能模拟选了多少分

        
666
        

• 

  星星图片2

那我就可以把这个3 变成变量放到vue的data中

 data() {
      return {
          count:3
      }
 },

悬浮和确定

• 第一个悬浮涉及到事件 mouseenter,悬浮的时候改变count
• 第二是鼠标移开 mouseleave,离开的时候显示之前的值，这就需要一个oldcount 来保存上一个count
• 当鼠标点击的时候 把当前的count 覆盖oldcount

        
{{oldCount}} - {{count}}
        
    

  data() {
                return {
                   count:3,
                   oldCount:3,
                   totalCount:10,
                }
            }

完整代码

    
    
    
    
      


   
    

        
{{oldCount}} - {{count}}