vue.js_04_vue.js的for循环，if判断和show显示
1.for循环
<body>
<div id="app">
<p>{{list1[0]}}</p>
<hr />
<!--遍历数组-->
<p v-for="(item,index) in list1">第{{index}}项:{{item}}</p> <!--遍历数组中的对象-->
<p v-for="user in list2">id:{{user.id}}--name{{user.name}}</p> <!--遍历对象-->
<p v-for="(val,key) in user">{{val}}--{{key}}</p> <!--v-for迭代数字 初始值:1-->
<p v-for="count in 10">{{count}}</p> id:<input type="text" v-model="id"/>
name:<input type="text" v-model="name"/>
<input type="button" value="添加" @click="add"/> <p v-for="item in list2" :key="item.id">
<input type="checkbox" /> {{item.id}}--{{item.name}}
</p> </div> <script>
var vm = new Vue({
el: "#app",
data: {
id:'',
name:'',
list1:[1,2,3,4,5,6,7,8,9],
list2:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
],
user:{
id:1,
name:'托尼斯塔克',
gender:'男',
}
},
methods: {
add(){
this.list2.unshift({id:this.id,name:this.name}) }
} })
</script>
</body>
2.v-if和v-show
<body>
<div id="app">
<input type="button" value="切换" @click="flag=!flag" />
<!--移除元素和添加元素 -->
<h3 v-if="flag">这是v-if</h3>
<!--设置display:none的属性-->
<h3 v-show="flag">这是v-show</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
},
methods: {
}
})
</script>
</body>
vue.js_04_vue.js的for循环，if判断和show显示的更多相关文章
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- js中的循环语句
js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) { //statements;} var a=1,b=0; whil ...
- JS基础与循环
JS 简介 [JS的三种方式] 1.HTML标签中内嵌JS <button onclick="javascript:alert('白痴')">呵呵呵</butto ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生JS实现图片循环切换
<!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- Node.js 的事件循环机制
目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...
- 浏览器中 JS 的事件循环机制
目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...
随机推荐
- luoguP1154 奶牛分厩 [数论]
题目描述 农夫约翰有N(1<=N<=5000)头奶牛,每头奶牛都有一个唯一的不同于其它奶牛的编号Si,所有的奶牛都睡在一个有K个厩的谷仓中,厩的编号为0到K-1.每头奶牛都知道自己该睡在哪 ...
- prometheus配置详情
https://prometheus.io/docs/prometheus/latest/configuration/configuration/ 下面监控宿主机和容器的内存,CPU,磁盘等状态 gr ...
- C/C++语言实现单链表（带头结点）
彻底理解链表中为何使用二级指针或者一级指针的引用 数据结构之链表-链表实现及常用操作(C++篇) C语言实现单链表,主要功能为空链表创建,链表初始化(头插法),链表元素读取,按位置插入,(有序链表)按 ...
- [Codeplus 4月赛]最短路
题意:理论上是给定一张完全图,有边权,在给一些单向边求最短路. 思路: 我充分体会到了我图论的菜. 理论上建图肯定是不能\(n^2\)的,考虑如何优化呢? 将边权异或值二进制替换,最后一遍最短路就行, ...
- Http学习(三)
HTTP的问题: 通信使用明文,可能会遭到窃听:HTTP本身不具备加密功能,根据TCP/IP协议工作的线路上可能会遭到窃听,即使通信内容已经加密,也会被看到 通信加密:通过SSL(Secure Soc ...
- Java 高级面试知识点汇总！
1.常用设计模式 单例模式:懒汉式.饿汉式.双重校验锁.静态加载,内部类加载.枚举类加载.保证一个类仅有一个实例,并提供一个访问它的全局访问点. 代理模式:动态代理和静态代理,什么时候使用动态代理. ...
- 图解 5 种 Join 连接及实战案例！（inner/ left/ right/ full/ cross）
Join 连接在日常开发用得比较多,但大家都搞清楚了它们的使用区别吗??一文带你上车~~ 内连接 inner join 内连接是基于连接谓词将俩张表(如A和B)的列组合到一起产生新的结果表,在表中存在 ...
- POJ 1696 /// 凸包
题目大意: 不能向左拐 不能重复走 就是求一个螺旋凸包 把已经是凸包内的点标记一下就行 因为凸包的性质 所有点都能走到 注意起点的选择 还有 反复求凸包的过程中边界的改变 #include <c ...
- 面试系列九 es 提高查询效率
,es性能优化是没有什么银弹的,啥意思呢?就是不要期待着随手调一个参数,就可以万能的应对所有的性能慢的场景.也许有的场景是你换个参数,或者调整一下语法,就可以搞定,但是绝对不是所有场景都可以这样. 一 ...
- CVE-2015-0235
看了下代码,由于各人能力问题,只是了解了漏洞的起因,知道哪里出了问题,但是不知道怎么用阿... 可怜... 这种漏洞,公布出来,只要不给EXP,估计威胁都不大.或者,就是我脑筋太死??? 首先,是网上 ...