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. SpringBoot SpringSecurity 介绍(基于内存的验证)

    SpringBoot 集成 SpringSecurity + MySQL + JWT 附源码,废话不多直接盘 SpringBoot已经为用户采用默认配置,只需要引入pom依赖就能快速启动Spring ...

  2. 我自己写了一个波场(Tron)本地网页版钱包

    最近由于项目需要,需要给每个用户分配一个充币地址,考虑到钱包安全性和方便管理,于是自己动手写了一个本地网页版的钱包,附上源代码跟大家交流下. Github 源代码地址 钱包和项目是分离的,项目通过鉴权 ...

  3. 2022-04-05:golang中go.mod文件,做框架开发需要解析,请问如何解析?

    2022-04-05:golang中go.mod文件,做框架开发需要解析,请问如何解析? 答案2022-04-05: go.mod解析可参考这个.做框架开发主要是用到require和replace.具 ...

  4. 2022-02-13:k8s安装gitlab,yaml如何写?

    2022-02-13:k8s安装gitlab,yaml如何写? 答案2022-02-13: yaml如下: apiVersion: apps/v1 kind: Deployment metadata: ...

  5. ubuntu搜狗输入法显示简体中文,输入却是繁体中文问题解决方案

    一.现场重现 我的ubuntu版本是20.04,搜狗输入法版本是2.4.在输入的时候发生了如下场景: 明明输入法上是简体中文,可是打出来就变成了繁体中文! 二.解决方案 1.尝试 网上许多答案都是按下 ...

  6. go语言中实现生产者-消费者模式有哪些方法呢

    1. 简介 本文将介绍在 Go 语言中实现生产者消费者模式的多种方法,并重点探讨了通道.条件变量的适用场景和优缺点.我们将深入讨论这些方法的特点,以帮助开发者根据应用程序需求选择最适合的方式.通过灵活 ...

  7. nginx 反向代理proxy_pass 后加斜杠和不加斜杆的区别

    今日准备使用nginx 将上次使用docker 部署的一个vue项目进行地址代理,让他看起来高达尚一点,原本docker打包的镜像只是向外暴露了一个8191的端口,访问的时候就只能是 http://w ...

  8. kubernetes(k8s)大白学习02:容器和docker基础、使用、架构学习

    一.什么是容器 容器简介 简单说:容器(container)就是计算机上的一个沙盒进程,它与计算机上的所有其它进程相隔离. 这种隔离是怎么做到的呢?它利用了内核提供的 namespace 和 cgro ...

  9. 【RS】ENVI5.6.3 图像融合

            图像融合是将低空间分辨率的多光谱图像或高光谱数据与高空间分辨率的单波段图像重采样生成一幅高分辨率多光谱图像的遥感图像处理技术,使得处理后的图像既有较高的空间分辨率,又具有多光谱特征.一 ...

  10. Flutter状态管理新的实践

    1 背景介绍 1.1 声明式ui 声明式UI其实并不是近几年的新技术,但是近几年声明式UI框架非常的火热.单说移动端,跨平台方案有:RN.Flutter.iOS原生有:SwiftUI.android原 ...