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. thinkphp 原样输出

    可以使用literal标签来防止模板标签被解析,例如: 大理石构件 <literal> <if condition="$name eq 1 "> value ...

  2. springboot启动报 A child container failed during start 错误解决过程

    启动结果如下: "C:\Program Files\Java\jdk1.8.0_201\bin\java.exe" -agentlib:jdwp=transport=dt_sock ...

  3. （转）详解HttpURLConnection

    请求响应流程 设置连接参数的方法 setAllowUserInteraction setDoInput setDoOutput setIfModifiedSince setUseCaches setD ...

  4. 尚学python课程---14、python中级语法

    尚学python课程---14.python中级语法 一.总结 一句话总结: var[1:5] 访问模式:比如字符串,比如列表元祖,字典等 del 删除模式:比如列表.元祖.字典 1.Python的N ...

  5. 有道云笔记新功能发现——有道云笔记剪报，完美解决不开会员保存csdn博客到本地的问题。

    怎么用 方法一:谷歌插件 方法二:http://note.youdao.com/web-clipper-chrome.html 添加到书签 功能: 能够把网页浏览的内容保存到有道云笔记 解决了自己的难 ...

  6. 阿里云CentOs7上安装GitLab

    一.安装 基本上可以根据官网的教程来安装:https://www.gitlab.com.cn/installation/#centos-7 只不过我们暂时没有邮件服务器,所以postfix没有安装. ...

  7. sql还原数据库时候改变数据库名

    需求:在做图书馆数据整合时候,由于有两个校区,用的是分离开的同一个数据库,数据库名字都一样的,现在我要整合在一起,我的想法是把两个数据库先还原到我本地,用写好的脚本整合到一起.所以,我还原两个数据库时 ...

  8. HUD1686-Oulipo-kmp模板题/哈希模板题

    The French author Georges Perec (1936–1982) once wrote a book, La disparition, without the letter 'e ...

  9. 《DSP using MATLAB》Problem 8.34

    今天下了小雨,空气中泛起潮湿的味道,阴冷的感觉袭来,心情受到小小影响. 代码: hp2lpfre子函数 function [wpLP, wsLP, alpha] = hp2lpfre(wphp, ws ...

  10. .net core模糊查询及分页

    在项目文件夹中,创建 PaginatedList类,然后用以下代码替换模板代码. using Microsoft.EntityFrameworkCore; using System; using Sy ...