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的 ...
随机推荐
- 基于pip的python包管理工具
以下是软件下载链接:https://mysecreat.lanzoub.com/i5yvf0swgtne 软件功能:可以对python包进行安装.卸载.升级.换源等操作,不用输入复杂命令 源码: im ...
- 任务系统之Jenkins子任务
今天下班即开启五一假期,早上临时定了行程去山东日照,原本计划下班就出发,但下班看了看导航,这一路红得发黑,于是决定还是晚点再走,现在有时间了,写篇简单的技术文章来提升下Blog逐渐降低的技术内容含量吧 ...
- vue中粘贴板clipboard的使用方法
一.npm安装clipboard npm install clipboard --save 二.页面结构 <span id="copyTarget">{{targetC ...
- 2022-07-02：以下go语言代码输出什么？A：编译错误；B：Panic；C：NaN。 package main import “fmt“ func main() { var a =
2022-07-02:以下go语言代码输出什么?A:编译错误:B:Panic:C:NaN. package main import "fmt" func main() { var ...
- 2022-04-23：给定一个长度为4的整数数组 cards 。你有 4 张卡片，每张卡片上都包含一个范围在 [1,9] 的数字。您应该使用运算符 [‘+‘, ‘-‘, ‘*‘, ‘/‘] 和括号 ‘
2022-04-23:给定一个长度为4的整数数组 cards .你有 4 张卡片,每张卡片上都包含一个范围在 [1,9] 的数字.您应该使用运算符 ['+', '-', '*', '/'] 和括号 ' ...
- 2021-05-31：怎么判断n个数俩俩互质？比如7,8,9任意两个数最大公约数是1，所以7,8,9两两互质。比如8,9
2021-05-31:怎么判断n个数俩俩互质?比如7,8,9任意两个数最大公约数是1,所以7,8,9两两互质.比如8,9,10不是两两互质,因为8和10的最大公约数是2. 福大大 答案2021-05- ...
- 2022-01-20： 矩形区域不超过 K 的最大数值和。 给你一个 m x n 的矩阵 matrix 和一个整数 k ，找出并返回矩阵内部矩形区域的不超过 k 的最大数值和。 题目数据保证总会存在一
2022-01-20: 矩形区域不超过 K 的最大数值和. 给你一个 m x n 的矩阵 matrix 和一个整数 k ,找出并返回矩阵内部矩形区域的不超过 k 的最大数值和. 题目数据保证总会存在一 ...
- 用批处理干掉汇编masm link六回车
干掉麻烦的六回车 踏破铁鞋无觅处,得来全不费功夫 前言 最近在上汇编语言的课,在手动编译链接的时候你可能做过以下操作: 输入 masm 1.asm 回车 回车 回车 输入 link 1.obj 回车 ...
- APP调用第三方(微信)登录（最详细的实现流程）
最近使用weexplus做了个app 用户需要的是可以使用第三方微信实现登录(虽然网上有很多相关的什么申请开发者账户.appid.openid等资料:但是都是讲的中间的那一部分请原谅我是个菜鸟,脑补开 ...
- python 环境下使用PIP 报错的解决方法
最近做一个小程序项目,使用djangorestframework,安装restframework 出现错误,安装环境Python2.7:出现错误如下: "UnicodeEncodeErro ...