辛巴的2020年Vue全套教程 学习笔记P4 指令的使用 评分小
2021-01-25 本文已影响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>
