2021-7-7 VUE笔记2
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的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记（有点乱）
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- [人脸活体检测] 论文：Searching Central Difference Convolutional Networks for Face Anti-Spoofing
文章目录 Searching Central Difference Convolutional Networks for Face Anti-Spoofing 1 导读 2 简介 3 方法 中心差分卷 ...
- day08-优惠券秒杀04
功能03-优惠券秒杀04 4.功能03-优惠券秒杀 4.7Redis优化秒杀 4.7.1优化分析 现在来回顾一下优惠券秒杀业务的两个主要问题: (1)首先是对优惠券的扣减,需要防止库存超卖现象: (2 ...
- 2022-02-06：等差数列划分 II - 子序列。 给你一个整数数组 nums ，返回 nums 中所有 等差子序列 的数目。 如果一个序列中 至少有三个元素 ，并且任意两个相邻元素之差相同，则称
2022-02-06:等差数列划分 II - 子序列. 给你一个整数数组 nums ,返回 nums 中所有 等差子序列 的数目. 如果一个序列中 至少有三个元素 ,并且任意两个相邻元素之差相同,则称 ...
- 2021-08-03：完美洗牌问题。给定一个长度为偶数的数组arr，假设长度为N*2，左部分：arr[L1……Ln]，右部分： arr[R1……Rn]，请把arr调整成arr[L1,R1,L2,R2,
2021-08-03:完美洗牌问题.给定一个长度为偶数的数组arr,假设长度为N*2,左部分:arr[L1--Ln],右部分: arr[R1--Rn],请把arr调整成arr[L1,R1,L2,R2, ...
- ToolStrip1
Private Sub ToolStrip1_ItemClicked(sender As Object, e As ToolStripItemClickedEventArgs) Handles Too ...
- Linux修改Python软链接
Linux修改python软链接 0. 适用场景及基础知识 适用场景: 有些自带的是python3命令,嫌输入太麻烦,可以修改成python命令 有些自带是python是python2,想修改成pyt ...
- ThreadLocal 的应用及原理
1. 是什么 JDK 对 ThreadLocal 类的描述为: 此类提供线程局部变量.这些变量与普通变量的不同之处在于,每个访问一个变量的线程(通过其get或set方法)都有自己的.独立初始化的变量副 ...
- hvv蓝初面试常见漏洞问题（下）
hvv蓝初面试常见漏洞问题(上) 6.ssrf 服务端伪造请求 原理 服务端提供了向其他服务器应用获取数据的功能,而没有对目标地址做任何过滤和限制.攻击者进而利用其对内部资源进行攻击.(通俗来说:就是 ...
- 看看Angular有啥新玩法！手把手教你在Angular15中集成报表插件
摘要:本文由葡萄城技术团队于博客园原创并首发.葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. Angular15新特性 Angular框架(以下简称"Angular" ...
- WPF 入门笔记 - 03 - 样式基础及模板
程序的本质 - 数据结构 + 算法 本篇为学习李应保老师所著的<WPF专业编程指南>并搭配WPF开发圣经<WPF编程宝典第4版>以及痕迹大佬<WPF入门基础教程系列> ...