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引擎线程)中执行 ...
随机推荐
- 期望dp+高斯消元优化——uvalive4297好题
非常好的题!期望+建矩阵是简单的,但是直接套高斯消元会T 所以消元时要按照矩阵的形态 进行优化 #include<bits/stdc++.h> using namespace std; ; ...
- LUOGU P2860 [USACO06JAN]冗余路径Redundant Paths （双联通，缩点)
传送门 解题思路 刚开始是找的桥,后来发现这样不对,因为一条链就可以被卡.后来想到应该缩点后找到度数为1 的点然后两两配对. #include<iostream> #include< ...
- QT中QString与string的转化，解决中文乱码问题
在QT中,使用QString输出到控件进行显示时,经常会出现中文乱码,网上查了一圈,发现大部分都是针对QT4增加4条语句:</span> [cpp] view plain copy QTe ...
- linux如何查看防火墙是否开启?删除iptables规则
iptables是linux下的防火墙组件服务,相对于windows防火墙而言拥有更加强大的功能,此经验咗嚛以centos系统为例.关于iptables的一般常见操作,怎么来判断linux系统是否启用 ...
- (15)python打包
.py文件在没有安装python软件的电脑上是不能被执行的
- JSF(JavaServer Faces)简介
JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架(是Java Community Process 规定的JSR-127标准).它提供了一种以组件为中心的 ...
- Vue-Grid-Layout分享一款好用的可拖拽组件
在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid ...
- 阿里云CentOs7上安装Mysql
前提:虽然yum源上有mysql,但是好像没有mysql-server,所以我们还是选择自己从官网上下载安装 一.新建文件夹,然后下载解压 cd /usr/ #新建mysql文件夹 mkdir mys ...
- Web-动态页面
<!doctype html>01 - JavaEE- JSP - EL&JSTL figure:first-child { margin-top: -20px; } #write ...
- Jumpserver-1.5.2 安装步骤
Jumpsever 是飞致云旗下的一块开源的堡垒机.在如今都在上云的趋势下,一款堡垒机非常重要. 官网:http://jumpserver.org/ GitHub:https://github.com ...