<!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结合功能实例讲解的更多相关文章

  1. 020——VUE中变异方法push的留言版实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue中使用some删除list中的数据

    在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...

  4. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  5. vue状态管理vuex从浅入深详细讲解

    1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...

  6. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  7. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  8. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  9. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

随机推荐

  1. HashMap底层原理

    原文出自:http://zhangshixi.iteye.com/blog/672697 1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射 ...

  2. linux 虚拟机设置好固定ip 修改了 dns 网络需要设置成桥接模式

    linux  虚拟机设置好固定ip 修改了 dns  网络需要设置成桥接模式  可以修复网络连接(浏览器返回 server not  found)

  3. httpd sshd firewalld 很多服务后面的d是什么意思

    在操作系统中,一般系统的服务都是以后台进程的方式存在,而且都会常驻系统中,直到关机才结束.这类服务也称Daemon,在Linux系统中就包含许多的Daemon. 判断Daemon最简单的方法就是从名称 ...

  4. Hexo博客配置笔记

    安装Hexo npm install hexo-cli -g cd /blog hexo init 安装next主题 git clone https://github.com/iissnan/hexo ...

  5. CMake入门教程(转帖)

    本文转自:https://www.cnblogs.com/never--more/p/6921837.html CMake入门教程 参考文献:http://www.ibm.com/developerw ...

  6. RocEDU.阅读.写作《霍乱时期的爱情》书摘(一)

    不可避免,苦杏仁的香味总是让他想起爱情受阻后的命运. 一切都显得凄凉无助,可那一间间肮脏的小酒馆里却传来震耳欲聋的鼓乐声,那是穷人的狂欢,既无涉上帝,也无涉圣神降临节的诫命. 他们经常谈起它,一同承受 ...

  7. cookie注入原理

    cookie注入原理-->红客联盟 http://www.2cto.com/article/201202/118837.html 前言: document.cookie:表示当前浏览器中的coo ...

  8. 实现在vista和win7中使用管理员权限接收WM_DROPFILES(OnDropFiles())消息的方法(好像XP不支持这个函数)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #pragma once   #ifndef WM_COPYGLOBALD ...

  9. MyBatis如何返回自增的ID

    <insert id="insertTable" parameterType="com.infohold.city.map.model.CheckTemplateM ...

  10. 单调队列:temperature

    题目大意:某国进行了连续n天的温度测量,测量存在误差,测量结果是第i天温度在[l_i,r_i]范围内. 求最长的连续的一段,满足该段内可能温度不降. 第一行n下面n行,每行l_i,r_i 1<= ...