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 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- 用OC实现双向链表：构造链表、插入节点、删除节点、遍历节点
一.介绍 双向链表:每一个节点前后指针域都和它的上一个节点互相指向,尾节点的next指向空,首节点的pre指向空. 二.使用 注:跟单链表差不多,简单写常用的.循环链表无法形象化打印,后面也暂不实现了 ...
- 【TCP/IP网络编程】：01理解网络编程和套接字
1.网络编程和套接字 网络编程与C语言中的printf函数和scanf函数以及文件的输入输出类似,本质上也是一种基于I/O的编程方法.之所以这么说,是因为网络编程大多是基于套接字(socket,网络数 ...
- 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 9
23.5.3 WebAPI框架应用 程序框架其实就是一个半成品项目,在应用框架时,核心的服务程序只应用,不需要改动.当然如果有必要,也可以根据项目的需要对框架进行二次开发.本节内容主要基于我们的框架 ...
- 【计算机网络】WebSocket实现原理分析
1.介绍一下websocket和通信过程? 1.1 基本概念 [!NOTE] Websocket是应用层第七层上的一个应用层协议,它必须依赖 HTTP 协议进行一次握手 ,握手成功后,数据就直接从 T ...
- GNSS学习笔记--坐标转换
GNSS 坐标转换 GNSS计算主要涉及三个坐标系,地心地固坐标系,地理坐标系和站心坐标系.这里主要介绍一下三个坐标的含义和转换公式. 地心地固坐标系如图X,Y,Z表示 (ECEF坐标系),以地心O为 ...
- Java报错：java.math.BigDecimal cannot be cast to java.lang.String
从数据库取数字,转为string,报错: java.math.BigDecimal cannot be cast to java.lang.String 错误代码 Integer.parseInt(( ...
- 关于EFCore线程内唯一
EntityFramework的线程内唯一 EntityFramework的线程内唯一是通过httpcontext来实现的 public static DbContext DbContext() { ...
- 17个常见的Python运行时错误
对于刚入门的Pythoner在学习过程中运行代码是或多或少会遇到一些错误,刚开始可能看起来比较费劲.随着代码量的积累,熟能生巧当遇到一些运行时错误时能够很快的定位问题原题.下面整理了常见的17个错误, ...
- 自从用python写了个自动弹幕脚本后，各大主播都来找我，净赚十万！
大家好,今天又给大家带来了Python爬虫的分享,今天我们继续上次的问题,继续来研究一下虎牙平台的爬虫. 起因 写完上次的代码,我冒出有一个很有趣的想法,就是,我们可以使用selenium来完成虎牙自 ...
- SpringBoot 教程之属性加载详解
免费Java高级资料需要自己领取,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G. ...