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引擎线程)中执行 ...
随机推荐
- C++——虚析构
目的: //只执行了 父类的析构函数//向通过父类指针 把 所有的子类对象的析构函数 都执行一遍//向通过父类指针 释放所有的子类资源 方法:在父类的析构函数前+virtual关键字 #define ...
- 20175323《Java程序设计》第四周学习总结
教材学习内容总结 我用幕布记录学习过程和思路,下面是我这章的知识框架总结https://mubu.com/doc/ffMhY6FVc0 教材学习中的问题和解决过程 问题1:教材121页的例六Examp ...
- Spring源码由浅入深系列一 简介
概述: Spring是一个企业级的开源框架.它提供轻量级的依赖注入.面向切面编程.全方位的整合框架.下图是Spring框架的组成部分,各部分内容作了简单说明. 依赖注入: 依赖注入是S ...
- spring源码读书笔记
如果我们在web项目里面使用spring的话,通常会在web.xml里面配置一个listener. <listener> <listener-class> org.spring ...
- Eclipse添加git插件及操作
注册账号新建仓库 在Github已经注册成功自己的账号 新建一个仓库 创建成功后记住url: 安装Git插件 首先像安装Pydev一样 点击help的Install New Software 点击Ad ...
- 工作记录--WPF自定义控件，实现一个可设置编辑模式的TextBox
原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...
- spring：常用的注解
bean.xml中配置依赖 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- Leetcode931. Minimum Falling Path Sum下降路径最小和
给定一个方形整数数组 A,我们想要得到通过 A 的下降路径的最小和. 下降路径可以从第一行中的任何元素开始,并从每一行中选择一个元素.在下一行选择的元素和当前行所选元素最多相隔一列. 示例: 输入:[ ...
- Python全栈开发：json与pickle
#!/usr/bin/env python # -*- coding;utf-8 -*- """ 正解(序列化):将Python数据类型转换成json或者pickle格式 ...
- Codeforces 388D Fox and Perfect Sets
链接:CF388D 题目大意 给定一个数\(n\),求选择\(0 \sim n\)中任意个数的数字组成的集合\(S\)中,有多少满足若\(a\in S,b\in S\),则\(a \bigoplus ...