首页 > 其他分享 >第八篇 vue - 基础 - 条件渲染

第八篇 vue - 基础 - 条件渲染

时间:2023-03-28 23:57:03浏览次数:40  
标签:vue show 第八篇 元素 else 切换 渲染 区块

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

<h1 v-if="awesome">Vue is awesome!</h1>
v-else

你也可以使用 v-else 为 v-if 添加一个 else 区块

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 

标签:vue,show,第八篇,元素,else,切换,渲染,区块
From: https://www.cnblogs.com/caix-1987/p/17267249.html

相关文章

  • 第六篇 vue - 基础 - 计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象exportdefault......
  • 第五篇 vue - 基础 - 响应式基础
    声明响应式状态选用选项式API时,会用data选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数Vue将在创建新组件实例的时候调用此函数,并将函数返回的对象......
  • 第七篇 vue - 基础 - 类与样式绑定
    Class与Style绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表和内联样式。因为class和style都是attribute,我们可以和其他attribute一样使用v-bind......
  • Vue——initProvide【十一】
    前言前面我们简单的了解了vue初始化时的一些大概的流程,这里我们详细的了解下具体的内容;内容这一块主要围绕init.ts中的initProvide进行剖析,初始化生命周期之后紧接着......
  • vue 软键盘组件封装
    场景和需求1软键盘固定2多输入框共用一个组件,聚焦切换时操作对象自动切换3根据光标在输入框的位置进行相应的输入和删除操作4点击软键盘时保存输入框光标活跃5输......
  • 记录--vue刷新当前页面
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助背景项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.思路(1)如果......
  • vue-cookies用法
    importCookiesfrom'vue-cookies';constcookies={};cookies.set=function(name='default',value='',cookieSetting=60*60*24*365){Co......
  • vue全家桶进阶之路23:Element UI
    ElementUI是一套基于Vue.js的组件库,它提供了一系列常用的UI组件,包括表单、弹窗、布局、导航等等。ElementUI的设计风格简洁、易用、美观,且易于定制。ElementUI......
  • Spring boot 、Vue学习体会
    近期集中学习了Springboot、Vue等技术,学习过程也是不断碰壁,总的来说自认为有些涨进,抓住核心、深入关键、逐步剖析。两个技术分别负责后台和前端,学习后一个感受,两个技术......
  • Vue子组件向父组件传值(this.$emit()方法)
    子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件,然后实现传值第一步在父组件中引入子组件 importUnitByPurchaseAddOrUpdatefrom'@views/module......