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 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- python爬虫之爬取网站到数据库
一.根据已有程序运行得到的结果 完整代码如下: import sqlite3; class DB(object): """数据库访问方法的实现""&q ...
- C语言解决汉诺塔问题！
很难受,看了很多资料才明白..... 对这个问题分析,发现思路如下:有n个黄金盘,要先把n-1个弄到B柱上,再把第n个弄到C柱上,然后把n-1个借助A柱弄到C柱上. 实现的函数如下: void f(i ...
- Shell（2）—数组
Shell(2)-数组 常用的 Bash Shell 只支持一维数组,不支持多维数组. 一.概念 Shell 并且没有限制数组的大小,理论上可以存放无限量的数据.Shell 数组元素的下标也是从 0 ...
- 用友的SPS定义
基于标准产品的支持服务(Standard Product Support,SPS).主要包括:更新升级(软件补丁更新与产品升级).问题解决(产品问题在线或热线解析).知识转移(用友到客户的知识传递). ...
- 自定义Visual Studio调试器中的对象显示方式
你有没有盯着调试器窗口中的对象,并希望你可以通过其他类型的东西来查看这些对象?我当然有!扩展项目以确定每个人的身份可能会非常快速.理想情况下,通过特定的属性值快速定位它们会很棒.对我们来说幸运的是,V ...
- Swagger UI in AspNetCore WebAPI
Swagger其实包含了三个部分,分别是Swagger Editor文档接口编辑器,根据接口文档生成code的Swagger Codegen,以及生成在线文档的Swagger UI.在AspNetCo ...
- vsto 以隐藏的方式打开一个excel 文件 并获得excel文件的缩略图
public byte[] GetExcelPictureFile(string filepath) { Workbook workbook=null; Microsoft.Office.Intero ...
- Python爬取6271家死亡公司数据，看十年创业公司消亡史
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 朱小五 凹凸玩数据 PS:如有需要Python学习资料的小伙伴可以加 ...
- springmvc学习笔记三：整合JDBC，简单案例==数据库事务配置（切面）
package cn.itcast.bean; import org.springframework.jdbc.core.PreparedStatementSetter; public class U ...
- 查询Mysql数据库所有数据库所占磁盘空间大小
查询Mysql数据库所有数据库所占磁盘空间大小: /,),' MB') as data_size, concat(truncate(sum(index_length)//,),'MB') as ind ...