1. <!doctype html>
  2. <html lang="en">
  3. <head id="head">
  4. <meta charset="UTF-8">
  5. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  6. <title>{{title}}</title>
  7. </head>
  8. <body>
  9. <div id="ask"><!--vue不能控制body和html的标签-->
  10. <li v-for="v in stus">
  11. {{v.name}} ======> {{v.sex}}
  12. </li>
  13. <input type="radio" v-model="type" value="all" checked> 全部
  14. <input type="radio" v-model="type" value="boy" > 男孩
  15. <input type="radio" v-model="type" value="girl" > 女孩
  16. </div>
  17. <script>
  18. var vue = function (options){new Vue(options)};
  19. vue({
  20. el:'#head',
  21. data:{
  22. title:'Vue v-for操作与computed结合功能'
  23. }
  24. });
  25. var app = vue({
  26. //element
  27. el:'#ask',
  28. computed:{
  29. stus(){
  30. if(this.type == 'all'){
  31. return this.user;
  32. }else{
  33. /*es6写法 防止用不了this.type*/
  34. return this.user.filter((v)=>{
  35. return v.sex == this.type;
  36. })
  37. }
  38. }
  39. },
  40. data:{
  41. type:'all',
  42. user:[
  43. {name:'小刘',sex:'boy'},
  44. {name:'小王',sex:'boy'},
  45. {name:'小花',sex:'girl'},
  46. {name:'小芳',sex:'girl'},
  47. ]
  48. }
  49. });
  50.  
  51. </script>
  52. </body>
  53. </html>

Vue v-for操作与computed结合功能的更多相关文章

  1. 19.VUE学习之- v-for与computed结合功能 筛选实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  3. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  4. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  5. PHP操作实现一个多功能购物网站

    PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...

  6. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue cmd命令操作

    1.安装node(安装到电脑中,不同项目不需重复安装) 安装nodejs(如果不是在C:则需要配环境变量)2.打开cmd C:创建一个文件夹(名字不要用node) 1.进入该文件夹 2.node -v ...

  8. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

随机推荐

  1. 《Java面试全解析》505道面试题详解

    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...

  2. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  3. C++入门到理解阶段二基础篇(3)——C++数据类型

    目录 1.数据类型概述 2.基本的内置类型 整型 实型(浮点型) 字符型 转义字符 字符串型 c风格的字符串 c++风格的字符串 布尔类型bool 1.数据类型概述 使用编程语言进行编程时,需要用到各 ...

  4. 现代C++实现多种print

    目录 Print Version1 Print Version2 Print Version3 Print Version4 容器的Print tuple容器的print 结语 学习C++的朋友会遇到 ...

  5. Java开发桌面程序学习(四)——常用应用布局模板和简单分析

    布局 前言 刚开始的时候,不知道使用什么布局,发现SceneBuilder其实有8.5版本的,里面就是有提供一个简单的桌面程序模板,8.5可以去官网下载,不过网速好像有点慢,慢慢等吧,官网下载地址 布 ...

  6. 深入C#并行编程(2) -- 使用线程

    一.可以使用位于命名空间System.Threading中的Thrad类开启线程: //声明一个新的线程 Thread myThread = new Thread(LoopFunc); //传递一个T ...

  7. Spring框架教程IDEA版-----更新中

    补充:设计模式中的工厂模式 设计模式党的主要原则:(1)对接口编程,而不是对实现编程 (2)优先使用对象组合而不是继承 在实现接口的方法时: @Override是伪代码,表示重写.(当然不写@Over ...

  8. Latex学习笔记 第一章

    1.使用空行分段. 空行只起分段的作用,使用过多的空行并不起增大段间间距的作用. 2.段前不用打空格,LateX会自动完成文字的缩进. 即使打了也会被自动忽略. 3.通常汉字后面的空格会被忽略,其他符 ...

  9. MySQL入门——在Linux下安装和卸载MySQL

    MySQL入门——在Linux下安装和卸载MySQL 摘要:本文主要学习了如何在Linux系统中安装和卸载MySQL数据库. 查看有没有安装过MySQL 使用命令查看有没有安装过: [root@loc ...

  10. 邮Z速递物流,让用户密码在网络中遨游

    " 最近分析快递行业的APP上瘾了,求解救." 邮政作为快递行业一个傻大黑的存在,一直很奇怪,我一直在纳闷,邮政和EMS到底是不是一家,在很多网点,它们是一体的存在,但很多东西,又 ...