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的 ...
随机推荐
- create-react-app 构建的项目使用代理 proxy 解决跨域请求
1. 正常运行 npm run eject 暴露项目的配置文件 (前三个步骤可省略,最好的是按照第四步操作) 在config/webpackDevServer.config文件下,大概在104行 1 ...
- [C++项目] 通讯录管理系统
文章目录 通讯录管理系统 1.系统需求 2.创建项目 2.1 创建项目 2.2添加文件 3.菜单功能 4.退出功能 5.添加联系人 5.1 设计联系人结构体 5.2 设计通讯录结构体 5.3 main ...
- Go坑：time.After可能导致的内存泄露问题分析
Go 中 time.After 可能导致的内存泄露 一.Time 包中定时器函数 go v1.20.4 定时函数:NewTicker,NewTimer 和 time.After 介绍 time 包中有 ...
- Spring源码：Bean生命周期（三）
前言 在之前的文章中,我们已经对 bean 的准备工作进行了讲解,包括 bean 定义和 FactoryBean 判断等.在这个基础上,我们可以更加深入地理解 getBean 方法的实现逻辑,并在后续 ...
- Linux修改系统时间（手动/自动同步）
一.手动修改 1.在终端窗口中输入date来查看系统当前的时间. 2.使用命令:"date -s 完整日期时间(YYYY-MM-DD hh:mm:ss)" 3.最后使用命令:&qu ...
- 2020-09-29：介绍volatile功能。
福哥答案2020-09-29:#福大大架构师每日一题# 功能如下:1.内存可见.2.禁止指令重排序. 实现如下:1.字节码层面 ACC_VOLATILE 2.JVM层面volatile内存区的读写 都 ...
- 2022-02-20：设计内存文件系统。 设计一个内存文件系统，模拟以下功能： ls： 以字符串的格式输入一个路径。如果它是一个文件的路径，那么函数返回一个列表，仅包含这个文件的名字。如果它是一个文件
2022-02-20:设计内存文件系统. 设计一个内存文件系统,模拟以下功能: ls: 以字符串的格式输入一个路径.如果它是一个文件的路径,那么函数返回一个列表,仅包含这个文件的名字.如果它是一个文件 ...
- json函数
Python与JSON(load.loads.dump.dumps) 1.Python中加载JSON 使用loads(string):作用将string类型转为dict字典或dict链表 # 加载 ...
- 记录一些不知道哪里冒出来的 idea（可能已存在）
2022/7/4 给定一张 \(n\) 个点的有权无向图和 \(m\) 个关键点,求其生成树满足每个点到离它最近的关键点的距离之和最小. 输出该生成树边权和. 加强一下: 给出一个 \(N\) 个点 ...
- 【Clickhouse】ReplaceingMergeTree引擎final实现合并去重探索
前言 在OLAP实践中,在有数据更新的场景中,比如存储订单数据,我们经常会用到ReplaceingMergeTree引擎来去重数据,以获取数据的最新状态.但是ReplaceingMergeTree引擎 ...