- A+
所属分类：Web前端
我们在上文的基础上，继续学习
条件判断：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> 展示效果：
下一文，我们讲组件传值（同级组件、父子组件）
