v-for指令：遍历

HTML和效果图

有几个需要讲的点，先看v-for的HTML，如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>蜀云泉</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        <!-- 直接遍历数字 -->

        <p v-for="item in 3">这是第{{ item }}次循环</p>

        <!-- 遍历list数组 -->

        <p v-for="item in list" v-text="item"></p>

        <!-- 遍历list对象 -->

        <p v-for="item in list2">{{ item.id }}--{{ item.name }}</p>

        <!-- 遍历list3对象 -->

        <p v-for="(val,key,i) in list3">值是：{{ val }}--键是：{{ key }}--索引是：{{ i }}</p>

        <hr>

        <!-- 再使用v-for遍历对象添加对象的时候，一定要写key，这个可以防止数据错乱 -->

        <div>

            <label>id:

                <input type="text" v-model="id">

            </label>

            <label>name:

                <input type="text" v-model="name">

            </label>

            <input type="button" value="添加" @click="add">

        </div>

        <p v-for="item in list2" :key="item.id">

            <input type="checkbox">{{ item.id }}--{{ item.name }}

        </p>

    </div>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

             id:'',

             name:'',

             list:[1,2,3],

             list2:[

                 {id:1,name:"许嵩"},

                 {id:2,name:"蜀云泉"},

                 {id:3,name:"弹吉他"}

             ],

             list3:{

                 id:1,

                 name:"蜀云泉",

                 gender:"男",

                 age:24

             }

         },

         methods: {

             add(){

                 this.list2.push({id:this.id,name:this.name})

             }

         }  

        })

    </script>

</body>

</html>

效果图如下：

v-for讲解

其实看代码就已经清楚了，我不清楚的一点是，我想写多个插值表达式，就必须使用插值表达式，这样不就出现了才学Vue的时候出现的插值表达式闪烁的问题了？我使用v-text也仅仅只能使用一个插值表达式，这里暂时存疑。

重点的地方就是v-for在遍历的同时，如果向数组里面插入新的内容的时候，一定要写key值，如果不写的话，复选框并没有真正的绑定数据，仅仅绑定的是那个索引的数据而已，所以一定要写key

v-if和v-show：创建，删除，显示，隐藏

HTML和效果图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>蜀云泉</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        <input type="button" value="点我" @click="flag=!flag">

        <h3 v-if="flag">这是v-if控制的元素</h3>

        <h3 v-show="flag">这是v-show控制的元素</h3>

    </div>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

             flag:true

         },

         methods: {

         }  

        })

    </script>

</body>

</html>

效果图：点击按钮，下面的会消失，再点击会出现

v-if和v-show的原理

这个我们打开调试台就知道了，如图

发现没，总结一下

  1. v-if每次都会重新删除和创建元素
  2. v-show是切换了元素的display的显示状态而已
  3. v-if有较高的切换性能消耗，所以涉及到频繁的切换，不要使用v-if
  4. v-show有较高的初始渲染消耗

防盗链接：本博客由蜀云泉发表

Vue学习笔记八：v-for，v-if，v-show指令的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  3. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  4. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  5. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  6. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

随机推荐

  1. dir函数

    dir函数: dir() 是一个内置函数,用于列出对象的所有属性及方法 下面进行尝试: 用下面两个tests test2文件做实验 #创建一个类,两个常量,类中函数test1,类中属性, class ...

  2. JavaScript：BOM&DOM

    BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...

  3. linux下用python搭建简单的httpServer

    1.服务器端:python -m SimpleHTTPServer 12000 python -m :  相当于import,当做模块来启动; 后面的12000代表的是端口 使用浏览器打开如下: 2. ...

  4. json.dump和json.dumps区别，json.load和json.loads的区别

    dumps是将python类型(list,dict等)转化成str格式,loads是将str转化成python类型(list,dict等). dump和load也是类似的功能,只是与文件操作结合起来了 ...

  5. NYOJ737石子合并(二)-（区间dp）

    题目描述:     有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆.求出 ...

  6. IDEA 工具从Json自动生成JavaBean

    1.先安装GsonFormat插件:File-->Setting-->Plugins-->GsonFormat-->OK 2.new 一个新的Class空文件,然后 Alt+I ...

  7. Windows 10同步时间的方法

    今天在安装了Windows 10 1809(October 2018 update)之后发现时间不能同步,以前并没有出现这种情况. 1) 打开控制面板,找到时钟域地区 2) 选择日期和时间 3) 选择 ...

  8. ubuntu安装jdk,maven,tomcat

    ubuntu16.04安装jdk8 -jdk 检查是否安装成功 java -version 出现如上信息即安装成功 安装maven,先去官网下载指定版本的maven,个人使用apache-maven- ...

  9. git配置正确且权限已开但是pull或push提示无权限

    因为之前提示输入用户名和密码时输入错误,之后就一直权限认证失败.这种情况下在git bash中输入: git config --system --unset credential.helper 就会重 ...

  10. 手游开发之lua的table 元表的运用

    元表在项目中的运用,其中就包括元方法这点.元方法是指__index和__newIndex,下面我总结下,更详细的例子讲解可以参考<lua程序设计 第2版>的第13章内容.长h短说,简言之有 ...