<!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. tomcat 连接器优化

    在$CATALINA_HOME/conf/server.xml配置文件中的Connetctor节点,和连接数相关的参数配置和优化. maxThreads Tomcat使用线程来处理接收的每个请求.这个 ...

  2. Object-c 开发之property

    @property 关键字:atomic,nonatomic,readonly,readwrite,assign,retain,copy,getter,setter,strong 默认行为(atomi ...

  3. Swoole学习(六)Swoole之定时器的创建与清除

    环境:Centos6.4,PHP环境:PHP7,Swoole2.1(在指定的时间后执行函数,需要1.7.7或更高版本) <?php //----------------------------- ...

  4. Python3.x：定义一个类并且调用

    Python3.x:定义一个类并且调用 1,定一个类Shrjj(其中有属性:name, jjzt,fbsjj,etf,lof,fjlof): class Shrjj(object): def __in ...

  5. MVc分页【关于使用扩展方法实现MVc分页】

    近期对MVc自定义分页作了一下小研究下面把他记下来 下述代1,2,3里面的代码可以直接拷贝,4以后的根据情况自己选定 1.在后台任写如下的扩展方法(任一类库都可以,但是用时得引用命名空间) // 添加 ...

  6. python3.6连接mysql或者mariadb

    python3.6版本的安装查看上一篇文章 mysql或mariadb数据库的安装查看以前的文章,这里不再赘述 首先在mariadb数据库中创建相应的库和表: MariaDB [(none)]> ...

  7. Helloworld.JaVa 第一次编程

    package Jc; class Jc1st { public static void main(String[] args) { System.out.println("Hello Wo ...

  8. iPhone Screen FAQ

    Q: Why is it a blank window after openning the app and connect mobile device? A: Please make sure th ...

  9. swift设计模式学习 - 装饰模式

    移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 装饰模式 在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真 ...

  10. SSM到Spring Boot-从零开发校园商铺平台

    第1章 开发准备 本章包含课程介绍,同时讲解开发网站所需要准备的事情,并且带领大家从零开始搭建一个Maven Web. 1-1 课程导学 1-2 开发准备 第2章 项目设计和框架搭建 本章主要先带领大 ...