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. A-O-P 一篇概览

    一.什么是AOP? AOP 即 Aspect-oriented Programming,Aspect 切面,什么是切面,就是一条大路上的收费站,检查站,首先它是一个统一的功能单元,或是收费.或是检查, ...

  2. js给元素设置样式

    一.style 利用 "[元素].style.[CSS属性名] = [属性值]" 的方法 1 var Box = document.getElementById('box') 2 ...

  3. Python-获取Local Storage和Session Storage

    一.简介 LocalStorage 是只读的.数据存储也是跨浏览器会话.LocalStorage 类似于SessionStorage. 区别在于,数据存储在 LocalStorage 是无期限的,而当 ...

  4. java英文字符串首字母大写

    java英文字符串首字母大写 /** * 首字母大写 * @param string * @return */ public static String toUpperCase4Index(Strin ...

  5. 2022-06-17:给定一个数组arr,含有n个数字,可能有正、有负、有0, 给定一个正数k。 返回所有子序列中,累加和最大的前k个子序列累加和。 假设K不大,怎么算最快? 来自Amazon。

    2022-06-17:给定一个数组arr,含有n个数字,可能有正.有负.有0, 给定一个正数k. 返回所有子序列中,累加和最大的前k个子序列累加和. 假设K不大,怎么算最快? 来自Amazon. 答案 ...

  6. 2021-04-07:给定一个非负数组arr,长度为N,那么有N-1种方案可以把arr切成左右两部分,每一种方案都有,min{左部分累加和,右部分累加和},求这么多方案中,min{左部分累加和,右部分累加和}的最大值是多少? 整个过程要求时间复杂度O(N)。

    2021-04-07:给定一个非负数组arr,长度为N,那么有N-1种方案可以把arr切成左右两部分,每一种方案都有,min{左部分累加和,右部分累加和},求这么多方案中,min{左部分累加和,右部分 ...

  7. 2021-06-11:给定两个字符串s1和s2,问s2最少删除多少字符可以成为s1的子串? 比如 s1 = “abcde“,s2 = “axbc“。

    2021-06-11:给定两个字符串s1和s2,问s2最少删除多少字符可以成为s1的子串? 比如 s1 = "abcde",s2 = "axbc". 福大大 答 ...

  8. 2021-08-01:如果只给定一个二叉树前序遍历数组pre和中序遍历数组in,能否不重建树,而直接生成这个二叉树的后序数组并返回。已知二叉树中没有重复值。

    2021-08-01:如果只给定一个二叉树前序遍历数组pre和中序遍历数组in,能否不重建树,而直接生成这个二叉树的后序数组并返回.已知二叉树中没有重复值. 福大大 答案2021-08-01: 先序遍 ...

  9. JVM 优化踩坑记

    本文记录了服务 JVM 优化的过程与思路,有对 JVM GC 原理以及对问题排查方向和工具的介绍,也有走弯路和踩坑,分享出来希望对大家有所帮助. 本文概要 服务异常和排查过程 RPC 接口超时的排查方 ...

  10. 创建CMDB项目