Vue的模板语法(条件判断、显示列表)、组件嵌套

  • Vue的模板语法(条件判断、显示列表)、组件嵌套已关闭评论
  • 9 次浏览
  • A+
所属分类:Web前端
摘要

我们在上文的基础上,继续学习v-if:不渲染DOM,前端页面看不到标签,更节省性能(常用)
v-show:渲染DOM。将元素设置为display:none

我们在上文的基础上,继续学习

条件判断: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> 

Vue的模板语法(条件判断、显示列表)、组件嵌套

我们将取值设置为false就能看到他们的区别

<template>   <div id="app">     <h1 v-if="false">你好,小艺</h1>     <button v-show="false">请登录</button>   </div> </template> 

可以看到 v-if的元素,标签已经不在了,而v-show只改变了元素的css样式
Vue的模板语法(条件判断、显示列表)、组件嵌套

该语法一般我们用于登录、注销按钮的显示判断
如:登录后显示用户名,没登录显示登录按钮

<template>   <div id="app">     <h1 v-if="isLogin">你好,小艺</h1>     <button v-if="!isLogin">请登录</button>   </div> </template>  <script> export default {   data() {     return{       isLogin:true     }   } } </script> 

呈现的页面:
Vue的模板语法(条件判断、显示列表)、组件嵌套


显示列表(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> 

呈现效果:
Vue的模板语法(条件判断、显示列表)、组件嵌套

我们实际开发中,显示的数据可能复杂一些,我们以学生信息表格为例,显示在一个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> 

显示效果:
Vue的模板语法(条件判断、显示列表)、组件嵌套


组件嵌套

当前,我们都是写在App.vue这个组件中。实际开发大型项目时,都是多页面的,有许许多多的组件。
我们一般将自定义的组件都写在 "components" 里面
Vue的模板语法(条件判断、显示列表)、组件嵌套

>组件命名规则

大写字母,驼峰命名
小写开头,并且全是小写可能会和本来的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> 

展示效果:
Vue的模板语法(条件判断、显示列表)、组件嵌套

下一文,我们讲组件传值(同级组件、父子组件)