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. HDU5377

    题意:给sum,m组询问,每组x,y求\(x^t=y\mod p,p|sum\),p是素数,求最小的t 题解:先处理sum的所有质因子p,求出p的原根rt,\(rt^a=x\mod p,rt^b=y\ ...

  2. BZOJ 1911 (APIO 2010) 特别行动队

    题目描述 你有一支由n名预备役士兵组成的部队,士兵从1到n编号,要将他们拆分成若干特别行动队调入战场.出于默契考虑,同一支特别行动队中队员的编号应该连续,即为形如(i,i+1,-,i+k)的序列. 编 ...

  3. hdu多校第二场1009 （hdu6599） I Love Palindrome String 回文自动机/字符串hash

    题意: 找出这样的回文子串的个数:它本身是一个回文串,它的前一半也是一个回文串 输出格式要求输出l个数字,分别代表长度为1~l的这样的回文串的个数 题解: (回文自动机和回文树是一个东西) 首先用回文 ...

  4. JavaScript开发人员必知的10个关键习惯

    还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧! 随着新技术的不断发展,JavaScript已 ...

  5. 19.SimLogin_case06

    # 使用自造的cookies登录GitHub import requests from lxml import etree str = '_octo=GH1.1.518803230.153726461 ...

  6. <Python基础>列表的基本操作

    s = 'abCDeFg aBcDea' s1 = s.split('D',3) #以s1列表为例 print(s1) #增 s1.append('foxabc') #返回值None,直接增到列表的最 ...

  7. mysql初次使用

  8. 调整element-ui中多个button处于同一行

    参考: https://element.eleme.cn/#/zh-CN/component/dropdown <el-row> <el-button-group style=&qu ...

  9. golang 高效字符串拼接

    https://blog.csdn.net/u012210379/article/details/45110705 虽然方便,但是使用+=操作符并不是在一个循环中往字符串末尾追加字符串最有效的方式,一 ...

  10. 解决 no compatible version found: ionic-native@^3.5.0

    npm ERR! Linux --generic npm ERR! argv "/usr/src/node-v6.10.3-linux-x64/bin/node" "/u ...