条件渲染

<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. pg获取tree完整的数据

    一个表: DRGCode DRGParend DRGName 这样一个tree表结构. 任意查询string,希望得到一个查询完整的tree.怎么做? SELECT * FROM "DRG& ...

  2. Hyperledger Fabric - 链码部署

    前提条件 启动测试网络 ./network-myself.sh up 创建通道 ./network-myself.sh createChannel 智能合约(链码) pom.xml文件 配置远程仓库 ...

  3. Chrome 135 版本新特性

    Chrome 135 版本新特性 一.Chrome 135 版本浏览器更新 ** 1. 第三方托管账户注册迁移到 OIDC 授权码流程** Chrome 135 将账户注册的登录页面从营销网站迁移到动 ...

  4. lua三色标记的读写屏障理解

    起因是已经被标记为黑色的对象无法进行再次遍历,然而黑色对象发生了引用变化:断开了引用或者引用了别的对象,会导致多标(不再被黑色对象引用的对象未能回收),漏标(黑色对象的新引用未能遍历标记)

  5. 揭秘 AI 工具的系统提示词「GitHub 热点速览」

    这次的五一假期,你打卡了哪些好玩的地方?️ 无论身在何处,都别忘了每周二来咱们的「GitHub 热点速览」打卡!准时为你奉上最新.最热的开源项目! 如果你也曾对 Cursor 这类 AI 编程工具的强 ...

  6. HarmonyOS NEXT开发实战教程：选择相册和拍照

    今天的内容是介绍在鸿蒙开发中从相册选择照片,和调用相机拍照,并使用这两个功能实现朋友圈编辑页面. 这部分内容没什么好废话的,都是固定用法,直接上代码.首先添加权限: ohos.permission.C ...

  7. 鸿蒙NEXT开发实用技巧：通用工具类

    今天分享一个幽蓝君自己在开发中的小技巧,就是封装一个通用工具类,之前大家如果下载过幽蓝君的代码可能也会发现这个东西.比如我们在开发中有一些比较常用的颜色.尺寸或者方法,都可以用一个类封装起来,这样不仅 ...

  8. 国产化-消息队列RocketMq（替代kafka）-单节点安装

    RocketMQ 是一款由阿里巴巴开源的分布式消息中间件,具有高可靠.高性能.高可扩展性等特点,在众多企业级应用中得到了广泛的应用.以下是对 RocketMQ 的详细介绍:   国内三大IT巨头阿里. ...

  9. 智能点餐助手平台：CodeBuddy模型驱动的技术革新

    我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 引言 在当代互联网技术高速发展 ...

  10. Torch-Pruning工具箱

    Torch-Pruning 通道剪枝网络实现加速的工作. Torch pruning是进行结构剪枝的pytorch工具箱,和pytorch官方提供的基于mask的非结构化剪枝不同,工具箱移除整个通道剪 ...