条件渲染

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>08_条件渲染</title>

</head>

<body>

<!--

1. 条件渲染指令

  v-if

  v-else

  v-show

2. 比较v-if与v-show

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

-->

<div id="demo">

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

  <p v-else>表白失败</p>

  <hr>

  <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 type="text/javascript">

  new Vue({

    el: '#demo',

    data: {

      ok: true,

    }

  })

</script>

</body>

</html>

列表渲染

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>06_列表渲染</title>

</head>

<body>

<!--

1. 列表显示

  数组: v-for / index

  对象: v-for / key

2. 列表的更新显示

  删除item

  替换item

-->

<div id="demo">

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

  <ul>

    <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: 16})">更新</button>

    </li>

  </ul>

  <button @click="addP({name: 'xfzhang', age: 18})">添加</button>

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

  <ul>

    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>

  </ul>

</div>

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

<script type="text/javascript">

  new Vue({

    el: '#demo',

    data: {

      persons: [

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

        {name: 'Jack', age:17},

        {name: 'Bob', age:19},

        {name: 'Mary', age:16}

      ]

    },

    methods: {

      deleteP (index) {

        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法

              // 1. 调用原生的数组的对应方法

              // 2. 更新界面

      },

      updateP (index, newP) {

        console.log('updateP', index, newP)

        // this.persons[index] = newP  // vue根本就不知道

        this.persons.splice(index, 1, newP)

        // this.persons = []

      },

      addP (newP) {

        this.persons.push(newP)

      }

    }

  })

</script>

</body>

</html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>06_列表渲染_过滤与排序</title>

</head>

<body>

<!--

1. 列表过滤

2. 列表排序

-->

<div id="demo">

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

  <ul>

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

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

    </li>

  </ul>

  <div>

    <button @click="setOrderType(2)">年龄升序</button>

    <button @click="setOrderType(1)">年龄降序</button>

    <button @click="setOrderType(0)">原本顺序</button>

  </div>

</div>

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

<script type="text/javascript">

  new Vue({

    el: '#demo',

    data: {

      searchName: '',

      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序

      persons: [

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

        {name: 'Jack', age:17},

        {name: 'Bob', age:19},

        {name: 'Mary', age:16}

      ]

    },

    computed: {

      filterPersons () {

//        debugger

        // 取出相关数据

        const {searchName, persons, orderType} = this

        let arr = [...persons]

        // 过滤数组

        if(searchName.trim()) {

          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)

        }

        // 排序

        if(orderType) {

          arr.sort(function (p1, p2) {

            if(orderType===1) { // 降序

              return p2.age-p1.age

            } else { // 升序

              return p1.age-p2.age

            }

          })

        }

        return arr

      }

    },

    methods: {

      setOrderType (orderType) {

        this.orderType = orderType

      }

    }

  })

</script>

</body>

</html>

vue_条件渲染、列表渲染的更多相关文章

  1. React 学习(五) ---- 条件和列表渲染

    条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...

  2. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  3. 【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

    目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...

  4. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

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

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

  6. 微信小程序学习笔记二 列表渲染 + 条件渲染

    1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为 ...

  7. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  8. 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符

    目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...

  9. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  10. 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器

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

随机推荐

  1. 太赞了！两个技巧帮你记住复杂 Linux 命令！

    Linux 经历这么多个年头了,其中命令越来越多,又加上参数的多种多样,就算是实打实的高手也没有十足的把握能把各种命令运用得炉火纯青,就别说那些初学者了. 面对这些复杂难记的命令,网上的一些工具如 K ...

  2. python tkinker答题工具简易实现

    分享一个简单的python tkinker实现的答题工具,效果参见https://www.bilibili.com/video/BV13e4y1E71d/ 点击查看代码 import tkinter ...

  3. java基础之File、流

    一.File类 我们可以使用File类的方法 创建一个文件/文件夹 删除文件/文件夹 获取文件/文件夹 判断文件/文件夹是否存在 对文件夹进行遍历 获取文件的大小 构造方法: 1.public Fil ...

  4. MySQL 中的索引数量是否越多越好？为什么？

    MySQL 中的索引数量是否越多越好?为什么? 虽然索引能够提高查询性能,但并不是索引越多越好.索引数量过多会带来一定的负面影响,尤其是在写操作频繁的场景下.需要根据实际的查询需求来合理设计索引,以平 ...

  5. 异步编程与Tortoise-ORM框架

    title: 异步编程与Tortoise-ORM框架 date: 2025/04/19 00:13:05 updated: 2025/04/19 00:13:05 author: cmdragon e ...

  6. Kotlin 实现类似 C# 的 Event 事件代码

    在c#中,内置了对事件的设计模式,你可以简单的 += 来订阅一个事件. Kotlin 目前我没有发现内置的支持(如果你发现了,请留言告诉我 tansm),但Kotlin 非常方便的运算符重载,自己实现 ...

  7. 【安装】Linux下安装CUDA ToolKit 11.4和cuDNN 8

    注意!如果你使用的是pytorch,只需要装好CUDA,不需要装cuDNN.而且完全可以等到报错了再装CUDA,一般情况系统都已经装好CUDA Toolkit了. 除非你只装了低版本的CUDA Too ...

  8. 信息资源管理综合题之“ITSM（IT服务管理）和ITIL（基础架构标准库）内容”

    一.在百度百科中,关于IT服务管理有如下描述:专家的研究和大量企业时间表明,在IT项目的生命周期中,大约80%的时间与IT项目运营维护有关,而该阶段的投资仅占整个IT投资的20%,形成了典型的&quo ...

  9. anaconda 报错之Solving environment: failed

    1问题: 在新电脑上重装了anaconda,发现创建一个新环境都报错"Solving environment: failed",已经添加了清华源,还是报错,查找了很多答案都不能解决 ...

  10. 【语义分割专栏】：FCN原理篇

    目录 前言 语义分割 背景介绍 FCN核心剖析 全卷积(Fully Convolution) 反卷积(deconvolution) 最近邻插值法 双线性插值 反卷积 跳跃连接(Skip Connect ...