美文网首页
辛巴的2020年Vue全套教程 学习笔记P4 指令的使用 评分小

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

作者: 陆碌 | 来源:发表于2021-01-25 10:10 被阅读0次

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

iconfont获取小星星

  • 1.首先通过iconfont网站选择两个小星星的图标,添加到项目中,获取地址
  • iconfont获取地址
  • 2.引用到页面中
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2346588_7p92ofokwao.css">

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

  • 3.在页面中写星星
    需要注意的是class中的三个值分别是
    • iconfont[必填]
    • icon-star[你刚刚选的星星名字]
    • star[我后面调整星星的样式和颜色用的]
<i class="iconfont icon-star star" v-for="item in 10"></i>
<i class="iconfont icon-star1 star" v-for="item in 10"></i>
  • 4.给星星放大和加颜色
    • 星星的大小是 用字体来调整的
    • 如果想给星星加宽高,需要提前给星星加display:inline-block 否则直接加宽高无效
 .star{
           font-size: 60px;
           color: gold;
       }        

效果

  • 星星图片

使用vue指令调整多少分

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

<div id="app">
        <h1>666</h1>
        <i class="iconfont  star" :class="item<=3? 'icon-star':'icon-star1'" v-for="item in 10"></i>
</div>

  • 星星图片2

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

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

悬浮和确定

  • 第一个悬浮涉及到事件 mouseenter,悬浮的时候改变count
  • 第二是鼠标移开 mouseleave,离开的时候显示之前的值,这就需要一个oldcount 来保存上一个count
  • 当鼠标点击的时候 把当前的count 覆盖oldcount
<div id="app">
        <h1>{{oldCount}} - {{count}}</h1>
        <i class="iconfont  star" 
        :class="item<=count? 'icon-star':'icon-star1'" 
        v-for="item in totalCount"
        @mouseenter = "count = item "
        @mouseleave = "count = oldCount "
        @click = " oldCount = item"
        ></i>
    </div>
  data() {
                return {
                   count:3,
                   oldCount:3,
                   totalCount:10,
                }
            }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2346588_7p92ofokwao.css">
    <style>
        *{
            padding: 0;
            margin: 0; 
            list-style: none;
        }
       
       .star{

           font-size: 60px;
           color: gold;
       }     
    </style>  
</head>
<body>
   
    <div id="app">
        <h1>{{oldCount}} - {{count}}</h1>
        <i class="iconfont  star" 
        :class="item<=count? 'icon-star':'icon-star1'" 
        v-for="item in totalCount"
        @mouseenter = "count = item "
        @mouseleave = "count = oldCount "
        @click = " oldCount = item"
        ></i>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>    
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                   count:3,
                   oldCount:3,
                   totalCount:10,
                }
            }
        }) 
    </script>
</body>

</html>

相关文章

网友评论

      本文标题:辛巴的2020年Vue全套教程 学习笔记P4 指令的使用 评分小

      本文链接:https://www.haomeiwen.com/subject/xydbzktx.html