Vue学习之vue中的v-if,v-show,v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<!-- vue中的v-if,v-show,v-for
v-if：
v-show:display:none/block
v-for:
-->
<div id="root">
<div v-if="show">hello dog</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show: true,
list: [1,2,3]
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
Vue学习之vue中的v-if,v-show,v-for的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
- Vue学习之webpack中使用vue(十七）
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
随机推荐
- Python源码学习Schedule
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
- 对IOC和DI的通俗理解
学习过spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- unity_实用小技巧（相机跟随两个主角移动）
在两人对战的游戏中,有时候我们希望能看清楚两玩家的状态,这时我们需要让相机跟随玩家,可是我们不能让相机只跟随一个玩家移动,这时我们可以取两玩家的中点作为相机的位置.方法如下: public Trans ...
- Unity3D 基于ShadowMap的平滑硬阴影
前言 传统的ShadowMap在明暗边缘处都会有很难看的锯齿,因此一般得到的结果会比较难看,常规的解决办法都会在使用ShadowMap渲染阴影的时候通过背面剔除把这种缺陷隐藏掉,最后剩下一个影子.但是 ...
- Jedis操作Redis--Hash类型
/** * Hash(哈希表) * HDEL,HEXISTS,HGET,HGETALL,HINCRBY,HINCRBYFLOAT,HKEYS,HLEN,HMGET,HMSET, HSET,HSETNX ...
- Spring Boot2 系列教程(一)纯 Java 搭建 SSM 项目
在 Spring Boot 项目中,正常来说是不存在 XML 配置,这是因为 Spring Boot 不推荐使用 XML ,注意,并非不支持,Spring Boot 推荐开发者使用 Java 配置来搭 ...
- Codeforces 734D. Anton and Chess（模拟）
Anton likes to play chess. Also, he likes to do programming. That is why he decided to write the pro ...
- Service:让客户端发现pod并与之通信
5.1.Service介绍 5.1.1.Serice简介 5.1.1.1什么是Service service是k8s中的一个重要概念,主要是提供负载均衡和服务自动发现. Service 是由 kube ...
- 【Offer】[56-2] 【数组中唯一只出现一次的数字】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 在一个数组中除一个数字只出现一次之外,其他数字都出现了三次.请找出那个只出现一次的数字 [牛客网刷题地址]无 思路分析 如果一个数字出现 ...
- WoSign新证书系统通过德国Cure53安全测试
近日,沃通WoSign新证书系统顺利通过德国Cure53白盒子安全测试,并公开发布审计报告总结版. 据悉,根据去年10月份Mozilla提出的整改要求,沃通WoSign投入研发力量高标准严要求地重新开 ...