首页 > 其他分享 >vue之条件渲染

vue之条件渲染

时间:2023-04-06 10:55:08浏览次数:58  
标签:vue 示例 渲染 else && 条件

目录

说明

“vue条件渲染指令包括v-if、v-else、v-else-if、v-show。

语法

v-if="条件1&&条件2"       # 条件可以用变量+运算符号表示,&&表示and
v-if-else="条件"
v-else           # 因为是例外,所以不需要使用条件

示例

<body> <div id="app"> <h1>条件格式渲染</h1> <p v-if="score>=90">优秀</p> <p v-else-if="score<90&&socre>=80">良好</p> <p v-else-if="score<80&&socre>=60">及格</p> <p v-else>不及格</p> </div> </body> <script> vm = new Vue({ el: '#app', data:{ score: 90 }, }) </script>

标签:vue,示例,渲染,else,&&,条件
From: https://www.cnblogs.com/smyz/p/17292110.html

相关文章

  • vue-生产环境强制开启dev-tool
    由于生产环境中无法启用dev-tool,而一些问题只在生产环境中体现,所以在生产环境中调试vue,我个人认为还是比较有用的,那么怎么在生产环境中启用dev-tools呢,便捷的方法只需要在chrome商店中下载vueforcedev就好啦cheers!!!!......
  • uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
    一,官方文档地址:https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule二,代码1,nvue页面:模板<viewclass="listTitle">{{item.title}}</view>......
  • 我的第一个项目(九) :飞机大战Vue版本塞到主页
    好家伙, 这是未进行分包的vue版本的飞机大战效果如下:  这里说明一下,大概使用逻辑是提供一个<div>然后在这<div>中渲染游戏 游戏主界面代码如下:1<template>2<div>3<h1>欢迎来到主页面</h1>4<divref="stage"></div>5</div......
  • vue excel导入,导出
    @GetMapping("/exportExample")@Inner(false)//publicRexportExample(Integercs,Stringcs2){publicvoidexportExample(MeterWatermeterWater,HttpServletResponseresponse)throwsIOException{//查询所有用户Map<String,......
  • 第四十篇 vue - 进阶主题 - 使用 Vue 的多种方式
    使用Vue的多种方式在Web的世界中从来就没有可以适配所有场景、解决所有问题的银弹。正因如此,Vue被设计成一个灵活的、可以渐进式集成的框架。根据使用场景的不同需要,相应地有多种不同的方式来使用Vue,以此在技术栈复杂度、开发体验和性能表现间取得最佳平衡独立脚本Vue可......
  • 第四十一篇 vue - 进阶主题 - 组合式 API 常见问答
    什么是组合式API?组合式API(CompositionAPI)是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件。它是一个概括性的术语,涵盖了以下方面的API1、响应式API例如ref()和reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。2、生命......
  • 第四十二篇 vue - 进阶主题 - 深入响应式系统
    响应式系统Vue最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的JavaScript对象组成的。当更改它们时,视图会随即自动更新。这让状态管理更加简单直观,但理解它是如何工作的也是很重要的,这可以帮助我们避免一些常见的陷阱。在本节中,我们将深入研究Vue响应性......
  • 第四十四篇 vue - 进阶主题 - 渲染函数 & JSX
    渲染函数&JSX在绝大多数情况下,Vue推荐使用模板语法来创建应用。然而在某些使用场景下,我们真的需要用到JavaScript完全的编程能力。这时渲染函数就派上用场了基本用法1、创建VnodesVue提供了一个h()函数用于创建vnodesimport{h}from'vue'constvnode=h(......
  • 第四十三篇 vue - 进阶主题 - 渲染机制
    渲染机制Vue是如何将一份模板转换为真实的DOM节点的,又是如何高效地更新这些节点的呢?我们接下来就将尝试通过深入研究Vue的内部渲染机制来解释这些问题虚拟DOM你可能已经听说过“虚拟DOM”的概念了,Vue的渲染系统正是基于这个概念构建的虚拟DOM(VirtualDOM,简称VDOM......
  • 第四十六篇 vue - 进阶主题 - 动画技巧
    动画技巧Vue提供了<Transition>和<TransitionGroup>组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外,还有许多其他制作网页动画的方式在Vue应用中也适用。这里我们会探讨一些额外的技巧基于CSSclass的动画对于那些不是正在进入或离开DOM的元素,我们可......