在b站聽《辛巴的2020年Vue全套教程》想著聽完課記錄一下學(xué)習(xí)筆記方便自己復(fù)習(xí)~
iconfont獲取小星星
- 1.首先通過iconfont網(wǎng)站選擇兩個小星星的圖標(biāo)伴找，添加到項目中脐恩，獲取地址
- iconfont獲取地址
- 2.引用到頁面中
<link rel="stylesheet" >
注意向族！
- 這個link 要寫在style 的前面，不然會覆蓋后面的css樣式窘面，我就是寫在style 后面導(dǎo)致i 標(biāo)簽調(diào)試半天也沒有改變大小
- 還有地址前面要加上https貌夕，不加也是會報錯找不到的
- 3.在頁面中寫星星
需要注意的是class中的三個值分別是- iconfont[必填]
- icon-star[你剛剛選的星星名字]
- star[我后面調(diào)整星星的樣式和顏色用的]
<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.給星星放大和加顏色
- 星星的大小是 用字體來調(diào)整的
- 如果想給星星加寬高，需要提前給星星加display:inline-block 否則直接加寬高無效
.star{
font-size: 60px;
color: gold;
}
效果
- 星星圖片
使用vue指令調(diào)整多少分
觀察上圖可以發(fā)現(xiàn)民镜，我這是實(shí)現(xiàn)了20個星星得10分的效果啡专，
那我只需要設(shè)置前幾顆星星的樣式就能模擬選了多少分
<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
- 第二是鼠標(biāo)移開 mouseleave,離開的時候顯示之前的值，這就需要一個oldcount 來保存上一個count
- 當(dāng)鼠標(biāo)點(diǎn)擊的時候 把當(dāng)前的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" >
<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>
