This article mainly introduces you to the detailed explanation of Vue header component development and gives you a reference. I hope you will have a deeper understanding of Vue component development.
1. Data transmission in header component development
1. App.vue introduces components
##
import header from './components/header/header'
export default { components:{ v-header:header } }
<v-header :sell="sellerObj"></v-header>
export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } }
<p class="logo"> <img :src="sell.avatar" alt="" width='64' height='64'/> </p> <span class="name">{{sell.name}}</span> <p class="description"> {{sell.description + '/' + sell.deliveryTime + '分钟送达'}} </p>
2. Header component pop-up layer (details)
1. Pop-up mask layer
(1) Set one State, determine the state to control display and hidedata (){ return { detailShow:false } }
<p v-if="detailShow" class="detail"></p>
<p class="bulletin-wrapper" @click="showDetails()" ></p> <p class="detail-close" v-if="sell.supports"> <i class="icon-close" @click="hideDetail()"></i> </p>
methods:{ showDetails () { this.detailShow=true }, hideDetail () { this.detailShow=false } }
2. Star rating
(1) Binding class The type that controls the star size// 利用 computed 属性 <p class="star" :class="starSizeType"></p>
computed: { starSizeType() { // 返回 星级的大小类型 48/36/24 return 'star-' + this.size; } }
Copy Code The code is as follows:
// 类名用变量存起来 const LENGTH = 5 // 星星长度 const CLS_ON = 'on' // 全星 const CLS_HALF = 'half' // 半星 const CLS_OFF = 'off'// 空星
itemClasses () { // 返回一个数组为每个span 的类名 (遍历) let spanClassList=[]; // 利用 实参评分来判断 有几颗全星,半星,空星 let scores=( Math.floor(this.score * 2) ) / 2 let intNum= Math.floor(scores); // 全星个数 let HashalfNum= scores % 1 !== 0 // 半星 for(var i=0;i<intNum;i++){ // 遍历全星的span spanClassList.push(CLS_ON) } if(HashalfNum){ // 如果有半星 加类名 spanClassList.push(CLS_HALF) } while(spanClassList.length<LENGTH){// 判断 是否有空星 及个数 spanClassList.push(CLS_OFF) } return spanClassList; } }
<p class="star" :class="starSizeType"> <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span> </p>
Detailed explanation of jQuery setting request information instance in header
Detailed explanation of php sending custom data through header
Summary of usage of php header
The above is the detailed content of Vue header component development example code. For more information, please follow other related articles on the PHP Chinese website!