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引擎线程)中执行 ...
随机推荐
- Pascal 排序算法
Pascal 排序 排序 排序就是将杂乱无章的数据元素,通过一定的方法按关键字顺序排列的过程.排序问题是一个十分重要的问题,并且排序的方法有很多种: 例子:输入20个数,将它们按照从高到低的次序排 ...
- day23_2_logging
#!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------- ...
- error LNK1104: 无法打开文件“C:\Users\Administrator\Desktop\....\\xxxx.exe”
1.错误原因:项目在在打开前已经打开了win32里面的程序,并且运行. 解决方法:关闭直接在win32中运行的程序,再点击调试 2.暂时不知道原因,打开程序还会报无权限创建可执行文件.如下图所示 解 ...
- IMS Call中的SS
1Hold procedure:对于每一个被HOLD的媒体流,SDP包含: 如果流之前被设置为“recvonly”媒体流则是一个“不活动”的SDP属性: 如果先前将流设置为“sendrecv”媒体流则 ...
- Map、可变参数、静态导入、Collections、Arrays、集合嵌套
Map双列集合 key 键 value 值 方法: put(K, V) //判断key值是否相等,相等,覆盖元素,不相等,存储 remove(K) Map集合的遍历(不要看到java提供了很多方法做一 ...
- 侧滑关闭Activity的解决方案——SwipeBackLayout
项目地址:ikew0ng/SwipeBackLayout: An Android library that help you to build app with swipe back gesture. ...
- 面试系列10 es生产集群的部署架构
如果你确实干过es,那你肯定了解你们生产es集群的实际情况,部署了几台机器?有多少个索引?每个索引有多大数据量?每个索引给了多少个分片?你肯定知道! 但是如果你确实没干过,也别虚,我给你说一个基本的版 ...
- typeerror: __init__() missing 2 required positional arguments: 'inputs' and 'outputs'
1 问题描述 使用下边这条命令去检查 TensorFlow Object Detection API是否正确安装: python object_detection\builders\model_bui ...
- POJ1160 Post Office-四边形不等式优化DP
方程 $\Large f(i,j)=min(f(i-1,k)+w(k+1,j))$ 其中$w(i,j)$表示在$[i,j]$的村庄都去一个邮局的最小距离和 证明w满足四边形不等式 设$w_k(i,j) ...
- 制作FastDFS的RPM包
首先获取fastdfs的源码,因为fastdfs还依赖一个libfastcommon的库,所以也要准备好. fastdfs的源码目录结构: libfastcommon的源码目录结构: 接下来将以Cen ...