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. Android_Gallery（画廊）

    转:http://blog.csdn.net/tianjf0514/article/details/7521398 Gallery是画廊的意思,可以实现图片的浏览功能. 主要内容 Gallery控件的 ...

  2. eclipse+terminal

    eclipse 怎么安装terminal插件   1 首先打开eclipse,找到help菜单,点击Eclipse Marketplace. 2 在search框里输入Terminal,点击Go查找. ...

  3. Activity详解三 启动activity并返回结果 转载 https://www.cnblogs.com/androidWuYou/p/5886991.html

    首先看演示: 1 简介 .如果想在Activity中得到新打开Activity 关闭后返回的数据,需要使用系统提供的startActivityForResult(Intent intent, int ...

  4. Tomcat点击项目名称，加载一个action请求

    <meta http-equiv="refresh" content="0;url=index.action">

  5. 像bootstrap一样的去做web编程

    1: 闭包 boot的闭包方式有点特别,普通的闭包是这样的: (function ($) { })(jQuery) 这种写法是怕全局污染,把$封闭在自己的空间里,暴露在外面的只有jQuery,这样,如 ...

  6. logback配置数据源日志error级别写入库

    LOGBACK.XML中配置 <appender name="db_log" class="ch.qos.logback.classic.db.DBAppender ...

  7. python字典的常用操作，数据类型划分

    一.数据类型划分之一 可分为:可变数据类型,不可变数据类型 不可变数据类型:元祖,布尔值(Bool),数值 int ,字符串 str               可哈希 可变数据类型:  list,d ...

  8. Wireless Password HDU - 2825

    题意: 给出m个模式串,要求构造一长度为n的文本串,至少包括k种模式串,求有多少种可能的模式串. k<=10  然后可以想到状压 一个文本串,k种模式串,很容易想到AC自动机. 把所有的模式串放 ...

  9. Linux使用crontab定时执行Python脚本清理日志

    Linux中,周期执行的任务一般由crond这个守护进程来处理.cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.crond的配置文件称为"crontab", ...

  10. Nginx 教程 1：基本概念

    简介 我们会告诉你 Nginx 是如何工作的,其背后的概念有哪些,以及如何优化它以提升应用程序的性能.还会告诉你如何安装,如何启动.运行. 这个教程包括三节: 基础概念——你可以了解命令(direct ...