Vue v-for操作与computed结合功能
- <!doctype html>
- <html lang="en">
- <head id="head">
- <meta charset="UTF-8">
- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
- <title>{{title}}</title>
- </head>
- <body>
- <div id="ask"><!--vue不能控制body和html的标签-->
- <li v-for="v in stus">
- {{v.name}} ======> {{v.sex}}
- </li>
- <input type="radio" v-model="type" value="all" checked> 全部
- <input type="radio" v-model="type" value="boy" > 男孩
- <input type="radio" v-model="type" value="girl" > 女孩
- </div>
- <script>
- var vue = function (options){new Vue(options)};
- vue({
- el:'#head',
- data:{
- title:'Vue v-for操作与computed结合功能'
- }
- });
- var app = vue({
- //element
- el:'#ask',
- computed:{
- stus(){
- if(this.type == 'all'){
- return this.user;
- }else{
- /*es6写法 防止用不了this.type*/
- return this.user.filter((v)=>{
- return v.sex == this.type;
- })
- }
- }
- },
- data:{
- type:'all',
- user:[
- {name:'小刘',sex:'boy'},
- {name:'小王',sex:'boy'},
- {name:'小花',sex:'girl'},
- {name:'小芳',sex:'girl'},
- ]
- }
- });
- </script>
- </body>
- </html>
Vue v-for操作与computed结合功能的更多相关文章
- 19.VUE学习之- v-for与computed结合功能 筛选实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...
- PHP操作实现一个多功能购物网站
PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue cmd命令操作
1.安装node(安装到电脑中,不同项目不需重复安装) 安装nodejs(如果不是在C:则需要配环境变量)2.打开cmd C:创建一个文件夹(名字不要用node) 1.进入该文件夹 2.node -v ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- 《Java面试全解析》505道面试题详解
<Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...
- 通过ES6 Module看import和require区别
前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
- C++入门到理解阶段二基础篇(3)——C++数据类型
目录 1.数据类型概述 2.基本的内置类型 整型 实型(浮点型) 字符型 转义字符 字符串型 c风格的字符串 c++风格的字符串 布尔类型bool 1.数据类型概述 使用编程语言进行编程时,需要用到各 ...
- 现代C++实现多种print
目录 Print Version1 Print Version2 Print Version3 Print Version4 容器的Print tuple容器的print 结语 学习C++的朋友会遇到 ...
- Java开发桌面程序学习(四)——常用应用布局模板和简单分析
布局 前言 刚开始的时候,不知道使用什么布局,发现SceneBuilder其实有8.5版本的,里面就是有提供一个简单的桌面程序模板,8.5可以去官网下载,不过网速好像有点慢,慢慢等吧,官网下载地址 布 ...
- 深入C#并行编程(2) -- 使用线程
一.可以使用位于命名空间System.Threading中的Thrad类开启线程: //声明一个新的线程 Thread myThread = new Thread(LoopFunc); //传递一个T ...
- Spring框架教程IDEA版-----更新中
补充:设计模式中的工厂模式 设计模式党的主要原则:(1)对接口编程,而不是对实现编程 (2)优先使用对象组合而不是继承 在实现接口的方法时: @Override是伪代码,表示重写.(当然不写@Over ...
- Latex学习笔记 第一章
1.使用空行分段. 空行只起分段的作用,使用过多的空行并不起增大段间间距的作用. 2.段前不用打空格,LateX会自动完成文字的缩进. 即使打了也会被自动忽略. 3.通常汉字后面的空格会被忽略,其他符 ...
- MySQL入门——在Linux下安装和卸载MySQL
MySQL入门——在Linux下安装和卸载MySQL 摘要:本文主要学习了如何在Linux系统中安装和卸载MySQL数据库. 查看有没有安装过MySQL 使用命令查看有没有安装过: [root@loc ...
- 邮Z速递物流,让用户密码在网络中遨游
" 最近分析快递行业的APP上瘾了,求解救." 邮政作为快递行业一个傻大黑的存在,一直很奇怪,我一直在纳闷,邮政和EMS到底是不是一家,在很多网点,它们是一体的存在,但很多东西,又 ...