if实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

   <div v-if="score>=90">还行</div>

   <div v-else-if="score>=80">一般般</div>

   <div v-else-if="score>=60">就这</div>

   <div v-else="score>=0">累了</div>

   <div v-show="disp">我去</div>

   <button @click="handle">new</button>

</div>

<script>

new Vue({

  el: '#app',

  data: {

   score:50,

   disp:false

  },

  methods:{

    handle:function(event){

    this.disp=!this.disp;

    }

  }

})

</script>

</body>

</html>

v-if和v-show的区别时v-if控制是否渲染，而v-show控制display：none

2021-7-7 VUE笔记2的更多相关文章

  1. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. Vue笔记（有点乱）

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  5. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  8. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  9. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  10. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. chatgpt接口开发笔记1:completions接口

    chatgpt接口开发笔记1:completions接口 个人博客地址: https://note.raokun.top 拥抱ChatGPT,国内访问网站:https://www.playchat.t ...

  2. RTSP Server(LIVE555)源码分析(二)-服务器创建

    一. 设置RTSP服务器配置 步骤1.5:rtspServer_Init--->BasicTaskScheduler::createNew()时序图如下: 1)步骤1.54,BasicTaskS ...

  3. IE不兼容问题 字符串格式化

    Js现在支持高级语法,字符串格式化 alert(`aaaa${content}`); 我们使用一段完整的html来打开测试下: 1 <!DOCTYPE html> 2 <html&g ...

  4. 网络编程之java简易聊天室实现

    最近浅学习了一些关于网络编程方面的知识,视频是跟着狂神学习的,可能学习的不是很深 说到网络,相信大家都对TCP.UDP和HTTP协议这些都不是很陌生,学习这部分应该先对端口.Ip地址这些基础知识有一定 ...

  5. PHP获取网页返回的JSON数据并在微信换行展示

    1 $url ="http://japi.juhe.cn/joke/content/text.from?page=&pagesize=&key=c968d04ab0ea15e ...

  6. 音视频八股文（8）-- h264 AnnexB

    NALU(Network Abstract Layer Unit) ⾳视频编码在流媒体和⽹络领域占有重要地位:流媒体编解码流程⼤致如下图所示: H264简介 H.264从1999年开始,到2003年形 ...

  7. vue全家桶进阶之路27：Vue.js 3.0的下载和安装

    使用脚手架vue-cli创建vue3项目,创建前需要准备以下: 1.node.js环境 见:https://www.cnblogs.com/beichengshiqiao/p/17251233.htm ...

  8. ABP - 依赖注入(1)

    依赖注入实现了系统之间.模块之间和对象之间依赖关系的解耦,基本上是现代应用程序框架必不可少的一个组成部分. ABP的依赖注入系统是基于Microsoft的依赖注入扩展库(Microsoft.Exten ...

  9. obloader 基于典型场景数据导入

    作者:刘书盛 热衷技术分享.编写技术文档 原创作品 oceanbase 数据库 原创内容未经授权不得随意使用,转载请联系小编并注明来源,谢谢! 预处理函数: 函数签名 返回类型 描述 LOWER(ch ...

  10. ODOO学习网址推荐

    Odoo官文文档: https://www.odoo.com/zh_cn/page/docs http://www.odoo.com/documentation/8.0/ Odoo中文文档推荐: ht ...