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 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- （day65）作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WPF 精修篇 用户控件
原文:WPF 精修篇 用户控件 增加用户控件 数据绑定还是用依赖属性 使用的事件 就委托注册一下 public delegate void ButtonClick(object b,EventArgs ...
- C语言解决汉诺塔问题！
很难受,看了很多资料才明白..... 对这个问题分析,发现思路如下:有n个黄金盘,要先把n-1个弄到B柱上,再把第n个弄到C柱上,然后把n-1个借助A柱弄到C柱上. 实现的函数如下: void f(i ...
- [Pytorch Bug] "EOFError: Ran out of input" When using Dataloader with num_workers=x
在Windows上使用Dataloader并设置num_workers为一个非零数字,enumerate取数据时会引发"EOFError: Ran out of input"的报错 ...
- CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分
CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分 接下来本系列将通过翻译(https://learnopengl.com)这个网站上关于PBR的内容来学习PBR(P ...
- vue发送ajx请求 axios
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- 图解servlet
You can see the following illustration to better understand the lifecycle of the Servlet. When the r ...
- Java入门系列之字符串特性（二）
前言 上一节我们讲解到字符串本质上就是字符数组,同时详细讲解了字符串判断相等需要注意的地方,本节我们来深入探讨字符串特性,下面我们一起来看看. 不可变性 我们依然借助初始化字符串的方式来探讨字符串的不 ...
- 安装keepalived OpenSSL is not properly installed on your system. !!!
错误信息: configure: error: !!! OpenSSL is not properly installed on your system. !!! !!! Can not includ ...
- 进度更新---Responsive Web Design Certification (300 hours)
进度更新---Responsive Web Design Certification (300 hours) 已经完成: basic html and html5 basic css applied ...