我們在上文的基礎上，繼續學習
條件判斷：v-if、v-show
>作用：用于控制元素的顯示
> 區別：
v-if:不渲染DOM，前端頁面看不到標簽，更節省性能（常用）
v-show:渲染DOM，將元素設定為display：none
我們看如下代碼，將他們都取值為true時，表示顯示
<template>
<div id="app">
<h1 v-if="true">你好，小藝</h1>
<button v-show="true">請登錄</button>
</div>
</template>
我們將取值設定為false就能看到他們的區別
<template>
<div id="app">
<h1 v-if="false">你好，小藝</h1>
<button v-show="false">請登錄</button>
</div>
</template>
可以看到 v-if的元素，標簽已經不在了，而v-show只改變了元素的css樣式
該語法一般我們用于登錄、注銷按鈕的顯示判斷
如：登錄后顯示用戶名，沒登錄顯示登錄按鈕
<template>
<div id="app">
<h1 v-if="isLogin">你好，小藝</h1>
<button v-if="!isLogin">請登錄</button>
</div>
</template>
<script>
export default {
data() {
return{
isLogin:true
}
}
}
</script>
呈現的頁面：
顯示串列（v-for）
>格式：<li v-for="(item,index) of array" :key="index" >
key屬性的作用：確保串列的唯一性，將index值系結要key屬性上
如我們data中有一個陣列變數
fruits:["香蕉","蘋果","西瓜"]
我們想遍歷到頁面中顯示，就要將v-for放在要重復的標簽中
<template>
<div id="app">
<ul>
<li v-for="(fruit,index) of fruits" :key="index">
<p>水果名稱：{{fruit}}</p>
<p>水果序號：{{index}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return{
fruits:["香蕉","蘋果","西瓜"]
}
}
}
</script>
呈現效果：
我們實際開發中，顯示的資料可能復雜一些，我們以學生資訊表格為例，顯示在一個table標簽中：
我們需要重復的是每一行，所以就在行內v-for，在具體的單元格里面顯示遍歷的專案
<template>
<div id="app">
<table>
<thead>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
</thead>
<tbody>
<tr v-for="(item,index) of student" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return{
student:[
{name:"小曹",age:17},
{name:"小曾",age:18},
{name:"小力",age:19}
]
}
}
}
</script>
顯示效果：
組件嵌套
當前，我們都是寫在App.vue這個組件中，實際開發大型專案時，都是多頁面的，有許許多多的組件，
我們一般將自定義的組件都寫在 "components" 里面
>組件命名規則
大寫字母，駝峰命名
小寫開頭，并且全是小寫可能會和本來的html標簽產生沖突
>引入外部組件
例如我們想將"components"中的組件引入到 "app.vue"中
- 首先我們已經在components中創建好了自定義組件(最好使用多個單詞，不然會報錯)
- 在app.vue中引入組件,并注冊組件
- 在script標簽中引入：
import hello from "./components/HelloComp.Vue"- 然后在export default中注冊：
components : { HelloComp:HelloComp }- 在ES6中，屬性名和屬性值相同時，可以只寫一個單詞，
即components : { HelloComp }
- 引入并注入完成后，我們直接在上面的template標簽中使用
<HelloComp></HelloComp> - 由于駝峰命名法的規則，其實我們可以使用-分隔，也可以不區分大小寫，以下都可以
<Hello-Comp></Hello-Comp>
<hello-comp></hello-comp>
下面演示一段完整代碼：
HelloComp.vue (自定義組件)
<template>
<div>
<h1>I am hello components</h1>
</div>
</template>
<script>
export default {
data() {
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<hello-comp></hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
}
<style>
</style>
展示效果：
下一文，我們講組件傳值（同級組件、父子組件）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501115.html
標籤：其他