条件渲染

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            1.条件渲染指令

                v-if    v-else    移除标签

                v-show            通过样式隐藏

            2.比较 v-if 与v-show

                如果需要频繁切换 v-show 较好

        -->

        <div id="app">

            <p v-if="ok">成功了</p>

            <p v-else>失败了</p>

            <p v-show="ok">表白成功了</p>

            <p v-show="!ok">表白失败了</p>

            <button @click="ok=!ok">切换</button>

        </div>

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

        <script>

            new Vue({

                el:'#app',

                data:{

                    ok:false

                }

            })

        </script>

    </body>

</html>

列表渲染

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            1.列表显示

                数组：v-for    /    index

                对象：v-for    /    key

            2.列表的更新显示

                删除item

                替换item

        -->

        <div id="demo">

            <h2>测试：v-for 遍历数组</h2>

            <ul>

                <!-- p:遍历的个体    index：下标-->

                <li v-for="(p,index) in persons" :key="index">

                    {{index}}----{{p.name}}----{{p.age}}

                    ----<button @click="deleteP(index)">删除</button>

                    ----<button @click="updateP(index,{name:'Cat',age:20})">更新</button>

                </li>

            </ul>

            <h2>测试：v-for 遍历对象</h2>

            <ul>

                <li v-for="(value,key) in persons[1]" :key="key">

                    {{value}}----{{key}}

                </li>

            </ul>

        </div>

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

        <script>

            //vue本身只是监视了的改变，没有监视数组内部数据的改变

            //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）

            //即vue包含一组观察数组的变异方法，所以他们也将会触发视图更新：

            //push()    pop()    shift()

            //unshift()    splice()    sort()    reverse()

            //实现思路：重写-更新

            new Vue({

                el:"#demo",

                data:{

                    persons:[

                        {name:'Tom',age:18},

                        {name:'Taosir',age:22},

                        {name:'moer',age:20},

                        {name:'Bom',age:24},

                    ]

                },

                methods:{

                    deleteP(index){

                        //删除persons中指定的index的p

                        this.persons.splice(index,1);

                    },

                    updateP(index,newP){

                        //并没有改变persons本身，数据内部发生了变化，但并没有调用变异方法，vue不会更新

                        //this.persons[index]=newP;    //没有指向persons本身，错！

                        this.persons.splice(index,1,newP);//删除一个，然后添加

                    }

                }

            })

        </script>

    </body>

</html>

VUE：条件渲染和列表渲染的更多相关文章

  1. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  2. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  3. react 入坑笔记（五） - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  4. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  5. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  6. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  7. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  8. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  9. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

随机推荐

  1. 转[总结]FFMPEG视音频编解码零基础学习方法 .

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视 ...

  2. 2016 年 Java 工具和技术的调查：IDEA 已超过

    最近「技术最前线」看到 RebelLabs 做了一次 2016 年 Java 工具与技术的调查,调查报告虽然是 6 月公布的,但数据一点也不过时. 所以「技术最前线」忙会了一中午,写了这篇文章,带大家 ...

  3. 有关elasticsearch分片策略的总结

    最近在优化部分业务的搜索吞吐率,结合之前优化过写请求的经验,想和大家讨论下我对es分片在不同场景下的分配策略的思路   原先普通索引我的分片策略是: 主分片=节点数,副本=1,这样可以保证业务数据一定 ...

  4. Cannot Allocate New Log

    http://www.itpub.net/thread-1842569-1-1.html http://czmmiao.iteye.com/blog/2277675

  5. [Beginning SharePoint Designer 2010]列表和库&内部内容类型

    本章概要: 1.SPS如何组织管理数据 2.如何创建列表和文档库 3.如何使用视图来过滤分类,分组列表和库 4.如何创建内容类型来应用一个定义好的结构到数据和文档中

  6. struts自己定义拦截器--登录权限控制

    说明:该自己定义的拦截器实现用户登录的权限控制. login.jsp--->LoginAction--重定向-->MainAction--->main.jsp 一.1.整体的步骤: ...

  7. 网络抓包工具 Fiddler

    网络抓包工具 Fiddler 下载网址 http://www.telerik.com/fiddler 简单介绍 Fiddler是一个http协议调试代理工具,它能够记录并检查全部你的电脑和互联网之间的 ...

  8. 有关计数问题的DP 划分数

    有n个无差别的物品,将它们划分成不超过m组.求出划分方法数模M的余数. 输入: 3 4 10000 输出: 4(1+1+2=1+3=2+2=4) 定义:dp[i][j] = j的i划分的总数 #inc ...

  9. Linux3.5内核以后的路由下一跳缓存

    在Linux3.5版本号(包括)之前.存在一个路由cache.这个路由cache的初衷是美好的,可是现实往往是令人遗憾的.下面是陈列得出的两个问题:1.面临针对hash算法的ddos问题(描写叙述该问 ...

  10. iOS实现抽屉效果

    抽屉效果 在iOS中非常多应用都用到了抽屉效果,比如腾讯的QQ,百度贴吧- --- 1. 终于效果例如以下图所看到的 --- 2.实现步骤 1.開始启动的时候.新建3个不同颜色的View的 1.设置3 ...