This time I will bring you the method of using the header component, what are the precautions when using the header component, the following is a practical case, let's take a look.
1. Data transfer in header component development
1. App.vue introduces components
import header from './components/header/header'
2. Registers components in App.vue
export default { components:{ v-header:header } }
3. Use components
<v-header></v-header>
Explanation: :sell="sellerObj", here it is treated as a formal parameter just like a function passing parameters, sellerObj is the actual parameter, then the parent component actual parameter How is it passed to the child component, and through what method
4. Parent component passes data to the child component
In the parent component, sellerObj needs to be exported as data, and the child component passes props from the parent component Get data from, and specify the data type
export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } }
Summary:
The child component creates a property in props to receive the parent component The passed value
Register the subcomponent in the parent component
-
Add the properties created in the subcomponent props to the subcomponent tag
Assign the value that needs to be passed to the subcomponent to the attribute
5. Calling data
<p> <img src="/static/imghwm/default1.png" data-src="sell.avatar" class="lazy" alt="How to use header component" > </p> <span>{{sell.name}}</span> <p> {{sell.description + '/' + sell.deliveryTime + '分钟送达'}} </p>
Details:
support Add v-if ='sell.supports' when binding data
Reason: Before we get the data through axios, we create an empty object sellerObj in the parent component and pass it to the child component first. If no data is transmitted at first, an underfined error will be reported. With v-if, if the data cannot be received, it will not be parsed, and no error will be reported.
2. Header component pop-up layer (details)
1. Pop-up mask layer
(1) Set one Status, determine the status to control the display and hiding
data (){ return { detailShow:false } }
<p></p>
(2) Bind the click event, change the status through the methods method, and control the visible and hidden effect
<p></p>
methods:{ showDetails () { this.detailShow=true }, hideDetail () { this.detailShow=false } }
2. Star rating
(1) Bind class to control the type of star size
// 利用 computed 属性 <p></p>
computed: { starSizeType() { // 返回 星级的大小类型 48/36/24 return 'star-' + this.size; } }
(2) Traverse the number of stars
Copy code The code is as follows:
(3) Define constants to control the status of each star
// 类名用变量存起来 const LENGTH = 5 // 星星长度 const CLS_ON = 'on' // 全星 const CLS_HALF = 'half' // 半星 const CLS_OFF = 'off'// 空星
(4) Determine the type of each span through calculation
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><p style="text-align: left;">(5) By dynamically binding class Add a class name to span </p> <pre class="brush:php;toolbar:false"><p> <span></span> </p>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
WeChat applet development of image compression function
How to use the prototype of the Object object in JS
How to deal with incomplete page display in 360 browser compatibility mode
The above is the detailed content of How to use header component. For more information, please follow other related articles on the PHP Chinese website!

PHP的Intl扩展是一个非常实用的工具,它提供了一系列国际化和本地化的功能。本文将介绍如何使用PHP的Intl扩展。一、安装Intl扩展在开始使用Intl扩展之前,需要安装该扩展。在Windows下,可以在php.ini文件中打开该扩展。在Linux下,可以通过命令行安装:Ubuntu/Debian:sudoapt-getinstallphp7.4-

CakePHP是一个开源的PHPMVC框架,它广泛用于Web应用程序的开发。CakePHP具有许多功能和工具,其中包括一个强大的数据库查询构造器,用于交互性能数据库。该查询构造器允许您使用面向对象的语法执行SQL查询,而不必编写繁琐的SQL语句。本文将介绍如何使用CakePHP中的数据库查询构造器。建立数据库连接在使用数据库查询构造器之前,您首先需要在Ca

【SpringBoot】通过Feign调用传递Header中参数如何通过Feign传递Header参数问题描述我们在SpringCloud中使用Feign请求另一个服务的Api接口时,有将Header中参数传递下去的需求,如果不做特殊处理,就会将Header中的参数丢失。解决方案方案一:通过@RequestHeader(name="headerName")来传递例如:Feign定义如下@FeignClient(name="service-name")pub

linux的header是指在文件或数据流中的开头部分,用于包含关于内容的元数据,通过正确地编写和使用Header文件,开发者能够更好地利用系统资源,提高代码的可读性和可维护性。

随着网络技术的发展,PHP已经成为了Web开发的重要工具之一。而其中一款流行的PHP框架——CodeIgniter(以下简称CI)也得到了越来越多的关注和使用。今天,我们就来看看如何使用CI框架。一、安装CI框架首先,我们需要下载CI框架并安装。在CI的官网(https://codeigniter.com/)上下载最新版本的CI框架压缩包。下载完成后,解压缩

PHP是一种非常受欢迎的编程语言,它允许开发者创建各种各样的应用程序。但是,有时候在编写PHP代码时,我们需要处理和验证字符。这时候PHP的Ctype扩展就可以派上用场了。本文将就如何使用PHP的Ctype扩展展开介绍。什么是Ctype扩展?PHP的Ctype扩展是一个非常有用的工具,它提供了各种函数来验证字符串中的字符类型。这些函数包括isalnum、is

PHP是一种功能强大的编程语言,可以用来创建动态网站和Web应用程序。其中一个最强大的功能之一是PHP的header()方法。在本文中,我们将探讨如何使用PHP的header()方法来调整网页。

区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均不支持header标签,需要IE9+以上浏览器才支持header标签。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
