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引擎线程)中执行 ...
随机推荐
- luogu P1332 血色先锋队[bfs]
题目描述 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重包围,现在他们将主力只好 ...
- BZOJ 1089 （SCOI 2003） 严格n元树
Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...
- Taro框架---左滑动删除
index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...
- 自定义Collection View布局
转自answer-huang的博客 原文出自:Custom Collection View Layouts UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...
- linux xargs命令一（与find ls等命令组合）（转）
-p 操作具有可交互性,每次执行comand都交互式提示用户选择 -i -i 选项告诉 xargs 可以使用{}代替传递过来的参数, 建议使用-I,其符合POSIX标准 -I 格式: xargs - ...
- 面试系列12 redis和memcached有什么区别
(1)redis和memcached有啥区别 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcached ...
- ASP.NET WEB API 特性路由
一.什么是特性路由? 特性路由是指将RouteAttribute或自定义继承自RouteAttribute的特性类标记在控制器或ACTION上,同时指定路由Url字符串,从而实现路由映射,相比之前的通 ...
- Struts2基本总结
现在Struts2慢慢退出舞台了,但是很多项目还需要用Struts2进行开发和维护,这里就简单的重新快速的掌握这门技术 Struts2的相关配置文件 * default.properties ...
- windows10 vs2019 + opencv 3.4.7环境搭建
windows vs2019 + opencv 3.4.7环境搭建 安装Opencv 3.4.7 下载 Opencv 第1步 进入 opencv releases 页面,点击 "Window ...
- [转]gnome环境中将家目录下预设的文件夹由中文名称改为英文名称
参考文章:gnome环境中将家目录下预设的文件夹由中文名称改为英文名称 打开终端 1 修改语言环境为英文 export LANG=en_US 如果想修改语言环境为日语,可执行 export LANG= ...