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的 ...
随机推荐
- Java实现平衡二叉搜索树(AVL树)
上一篇实现了二叉搜索树,本章对二叉搜索树进行改造使之成为平衡二叉搜索树(Balanced Binary Search Tree). 不平衡的二叉搜索树在极端情况下很容易退变成链表,与新增/删除/查找时 ...
- .NET开源分布式锁DistributedLock
一.线程锁和分布式锁 线程锁通常在单个进程中使用,以防止多个线程同时访问共享资源. 在我们.NET中常见的线程锁有: 自旋锁:当线程尝试获取锁时,它会重复执行一些简单的指令,直到锁可用 互斥锁: Mu ...
- Prism Sample 13-IActiveAwareCommands
本例和12的唯一区别,仅仅是在ViewModel中增加了一个IActiveAware,这决定了只有在Acitve状态的视图中才会执行自己ViewModel中的命令.
- 2022-09-21：有n个动物重量分别是a1、a2、a3.....an， 这群动物一起玩叠罗汉游戏， 规定从左往右选择动物，每只动物左边动物的总重量不能超过自己的重量 返回最多能选多少个动物，求一个
2022-09-21:有n个动物重量分别是a1.a2.a3-an, 这群动物一起玩叠罗汉游戏, 规定从左往右选择动物,每只动物左边动物的总重量不能超过自己的重量 返回最多能选多少个动物,求一个高效的算 ...
- 2021-08-30：给定两个字符串str1和str2，在str1中寻找一个最短子串，能包含str2的所有字符，字符顺序无所谓，str1的这个最短子串也可以包含多余的字符。返回这个最短包含子串。
2021-08-30:给定两个字符串str1和str2,在str1中寻找一个最短子串,能包含str2的所有字符,字符顺序无所谓,str1的这个最短子串也可以包含多余的字符.返回这个最短包含子串. 福大 ...
- nodejs 入门基本操作
操作fs模块 const path = require("path"); const fs = require("fs"); /* 相对路径是命令窗口执行的目录 ...
- el-table自适应列宽
这里可对内容为文本的列进行自适应列宽 以下为 工具方法 /** * 使用span标签包裹内容,然后计算span的宽度 width: px * @param valArr */ function get ...
- ICLR 2018-A Simple Neural Attentive Meta-Learner
Key 时序卷积+注意力机制(前者从过去的经验中收集信息,而后者则精确定位具体的信息.) 解决的主要问题 手工设计的限制:最近的许多元学习方法都是大量手工设计的,要么使用专门用于特定应用程序的架构,要 ...
- CMD 常用命令总结
CMD 常用命令总结 小技巧: 输入 help,查看帮助: Tab 键,自动补全: 上/下方向键,查看历史命令: 右键窗口标题栏 -> 属性,可以修改外观样式. # 关机.重启.注销.休眠.定时 ...
- rest --framework 源码学习第一天 view 类
首先view类:源码分析