019——VUE中v-for与computer结合功能实例讲解
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>v-for与computer结合功能实例讲解</title>
<script src="vue.js"></script>
</head> <body>
<div id="lantian">
<li v-for="v in stus">
{{v.name}}--{{v.sex}}
</li>
{{type}}
<input type="radio" v-model="type" value="girl" />女孩
<input type="radio" v-model="type" value="boy" />男孩
</div> <script>
var app = new Vue({
el: '#lantian',
computed: {
stus() {
if(this.type == 'all') {
return this.user;
} else {
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>
019——VUE中v-for与computer结合功能实例讲解的更多相关文章
- 020——VUE中变异方法push的留言版实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中使用some删除list中的数据
在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...
- vue中的vue-cli
在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
随机推荐
- ubuntu 可能的依赖包,安装过程中根据需要安装
/*************依赖包安装****************/下面是可能的依赖包,安装过程中根据需要安装 build-essential - libglib2.-dev libpng3 li ...
- Linux下编程学习一
本篇主要记录一些在学习LINUX下编程时,, C和C++语言的一些基础的常识, 一. 函数指针 void MyFun(int x); 函数声明 void (*FunP)(int ); 函数指针声明 下 ...
- Python笔记 #02# Inner workings of lists
源:DataCamp datacamp 的 DAILY PRACTICE + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...
- JAVA面试题整理（4）-Netty
1.BIO.NIO和AIO 2.Netty 的各大组件 3.Netty的线程模型 4.TCP 粘包/拆包的原因及解决方法 5.了解哪几种序列化协议?包括使用场景和如何去选择 6.Netty的零拷贝实现 ...
- 延迟环境变量扩展（bat）
延迟环境变量扩展(bat) 之前遇到一些环境变量的问题,简单记录下 From:http://www.cnblogs.com/dongzhiquan/archive/2012/09/05/2671218 ...
- 置顶，置低实现与window.scroll
//置顶,置低实现 $('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 300);}); $('# ...
- 学Git，用Git ①
本月开始接触到Git版本管理工具,觉得很有意思,在这里总结一下学习Git的一些心得体会. 要在Mac上完整的使用git进行版本管理,需要熟悉Mac终端操作命令和Git操作命令两种命令,索性两种命令加在 ...
- vue知识汇总
关于slot solt插槽,用来进行预定义,比如app里面的heard,各种情况下未必一致,把每种情况都加上solt,对应的情况下覆盖solt就可以了
- LightOJ 1356 Prime Independence（质因数分解+最大独立集+Hopcroft-Carp）
http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1356 题意: 给出n个数,问最多能选几个数,使得该集合中的 ...
- rownum和order by的执行顺序问题
SQL中rownum和order by的执行顺序的问题 : 在一个SQL中,如果同时使用rownum和order by,会有一个先后顺序的问题. 比如select id1,id2 from t_tab ...