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显示的更多相关文章

  1. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  2. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  3. JS基础与循环

    JS 简介 [JS的三种方式] 1.HTML标签中内嵌JS <button onclick="javascript:alert('白痴')">呵呵呵</butto ...

  4. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  5. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  6. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  7. Vue专题-js常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...

  8. Node.js 的事件循环机制

    目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...

  9. 浏览器中 JS 的事件循环机制

    目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...

随机推荐

  1. 双线程DP

    1.传纸条 好像是一道普及组水题? //Twenty #include<cstdio> #include<iostream> #include<cstring> # ...

  2. 多进程报错 EOFError: EOF when reading a line

    EOF的意思为:end of file 这个错误会在多进程中出现,是因为子进程中不能出现input,只能在父进程中使用. 结果:

  3. Bootstrap——可拖动模态框(Model)

    还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...

  4. Hadoop2.7.1配置NameNode+ResourceManager高可用原理分析

    关于NameNode高可靠需要配置的文件有core-site.xml和hdfs-site.xml 关于ResourceManager高可靠需要配置的文件有yarn-site.xml 逻辑结构: Nam ...

  5. curl http_code 状态码

    1.只得到一个url的http_code的状态码 curl -I -m 10 -o /dev/null -s -w %{http_code} http://127.0.0.1/a.html 查询hea ...

  6. RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more infor

    在virtualenv环境下使用matplotlib绘图时遇到了这样的问题: >>> import matplotlib.pyplot as pltTraceback (most r ...

  7. 04.Mybatis输出映射之ResultMap

    当实体类中的字段名与数据库中的字段名不一致时需要手动设置映射关系 在Mapper.xml中定义 <!-- resultMap最终还是要将结果映射到pojo上,type就是指定映射到哪一个pojo ...

  8. Stopwatch 计时器类

    C#_Stopwatch 类   命名空间:System.Diagnostics Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 Stopwatc ...

  9. [JZOJ3167] 【GDOI2013模拟3】查税

    题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx​+zx​∗(T−tx​) 有两个操作,修改某个位置上 ...

  10. day 41 前端之前端初识

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...