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的 ...
随机推荐
- 笔记：C++学习之旅---关联容器
笔记:C++学习之旅---关联容器 关联容器和顺序容器有着根本的不同:关联容器中的元素是按关键字来保存和访问的.与之相对,顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的. ...
- vue2路由导航守卫（钩子函数）
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD% ...
- HTML5中的document.visibilityState
在 HTML5 中,文档对象(即 document 对象)具有一个 visibilityState 属性,该属性表示当前文档对象的可见性状态. visibilityState 可能的取值有以下三种: ...
- spring事务传播的Propagation.REQUIRES_NEW以及NEVER MANDATORY验证，及其失效的诡异问题
NEVER 不使用事务,如果当前事务存在,则抛出异常 验证: @Service public class PrService { @Autowired PrDao dao; @Transactiona ...
- 2022-08-17：以下go语言代码输出什么？A：运行时 panic；B：32；C：编译错误；D：0。 package main func main() { var x *struct {
2022-08-17:以下go语言代码输出什么?A:运行时 panic:B:32:C:编译错误:D:0. package main func main() { var x *struct { s [] ...
- 2020-10-29：使用redis实现分布式限流组件，要求高并发场景同一IP一分钟内只能访问100次，超过限制返回异常，写出实现思路或伪代码均可。
福哥答案2020-10-29: 简单回答:固定窗口:string.key存ip,value存次数.滑动窗口:list.key存ip,value=list,存每次访问的时间. 中级回答:固定窗口:用re ...
- 2021-04-21：手写代码：Dijkstra算法。
2021-04-21:手写代码:Dijkstra算法. 福大大 答案2021-04-21: Dijkstra算法是一种基于贪心策略的算法.每次新扩展一个路程最短的点,更新与其相邻的点的路程.时间紧,未 ...
- WSGI实现一个WEB服务
- 如何借助Kafka持久化存储K8S事件数据？
大家应该对 Kubernetes Events 并不陌生,特别是当你使用 kubectl describe 命令或 Event API 资源来了解集群中的故障时. $ kubectl get even ...
- ODOO13 之九：Odoo 13开发之外部 API – 集成第三方系统
Odoo 13开发之外部 API – 集成第三方系统 Odoo 服务器端带有外部 API,可供网页客户端和其它客户端应用使用.本文中我们将学习如何在我们的客户端程序中使用 Odoo 的外部 API.为 ...