So verwenden Sie die Header-Komponente

Dieses Mal werde ich Ihnen die Methode zur Verwendung der Header--Komponente und die Vorsichtsmaßnahmen bei der Verwendung der Header-Komponente vorstellen. Schauen wir uns das hier an .

1. Datenübertragung für die Header-Komponentenentwicklung

1. Registrieren Sie sich in App.vue Komponente

import header from './components/header/header'

3. Verwenden Sie die Komponente

 export default {
   components:{
     v-header:header
   }
 }

Erläuterung: :sell="sellerObj", hier ist es wie eine Funktion, die Parameter übergibt und „sell“ als formalen Parameter behandelt, was sellerObj ist der tatsächliche Parameter, wie werden dann die tatsächlichen Parameter der übergeordneten Komponente an die untergeordnete Komponente übergeben und über welche Methode

<v-header :sell="sellerObj"></v-header>

muss angegeben werden

Zusammenfassung:

export default {
 props:{ // 子组件获取 父组件 数据
 sell:{
  type:Object // 传递的类型 
 }
 }
 }

1. Registrieren Sie die untergeordnete Komponente im übergeordneten Element Komponente

2. Fügen Sie die untergeordnete Komponente im Tag der untergeordneten Komponente hinzu. Das in props

3. erstellte Attribut weist den Wert zu, der an die Unterkomponente übergeben werden muss -Komponente zum Attribut

4. 5. Anrufdaten

Details:

<p class="logo">
 <img :src="sell.avatar" alt="" width=&#39;64&#39; height=&#39;64&#39;/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
  {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</p>

2. Popup-Ebene der Kopfzeile (Details)

1. Popup-Maskenebene

(1 ) Legen Sie einen Status fest, bestimmen Sie den Status zur Steuerung der Anzeige und des Ausblendens

data (){
 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
 }
}

(1) Bindungsklasse zur Steuerung der Art der Sterngröße

// 利用 computed 属性
<p class="star" :class="starSizeType"></p>

computed: {
 starSizeType() { // 返回 星级的大小类型 48/36/24
  return 'star-' + this.size;
 }
}

Code kopieren

(3) Definieren Sie Konstanten, um den Status jedes Sterns zu steuern

(4) Bestimmen Sie den Status jedes Spans durch Berechnung Typ

// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = 'on' // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星

(5) Fügen Sie einen Klassennamen zum Span hinzu, indem Sie die Klasse dynamisch binden

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;   
 }
}

Ich glaube Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Dinge finden Sie unter php Andere verwandte Artikel auf der chinesischen Website!

<p class="star" :class="starSizeType">
 <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</p>

WeChat-Applet-Entwicklung der Bildkomprimierungsfunktion

js dynamisches Betriebsformular

So verwenden Sie den Prototyp des Object-Objekts in JS

So gehen Sie mit unvollständiger Seitenanzeige im 360-Browser-Kompatibilitätsmodus um

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Header-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!