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 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- <Array> 54 （高频+hard ）45
55. Jump Game 希望知道能否到达末尾,也就是说我们只对最远能到达的位置感兴趣,所以维护一个变量 reach,表示最远能到达的位置,初始化为0.遍历数组中每一个数字,如果当前坐标大于 rea ...
- Eclipse优化之设置不自动弹出控制台和Server
有时候Eclipse启动,控制台console不会自动跳出来,需要手工点击该选项卡才行, 按下面的设置,可以让它自动跳出来(或不跳出来): windows -> preferences ...
- 一道常被人轻视的web前端常见面试题(JS)
本文转载自站长之家,如有侵权问题,请联系我,马上删除. 面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发 ...
- golang数据结构之散哈希表(Hash)
hash.go package hash import ( "fmt" ) type Emp struct { ID int Name string Next *Emp } //第 ...
- 新手入门：python的安装（一）
windows下python的安装 -----因为我是个真小白,网上的大多入门教程并不适合我这种超级超级小白,有时候还会遇到各种各样的问题,因此记录一下我的安装过程,希望大家都能入门愉快,欢迎指教 - ...
- keras RAdam优化器使用教程， keras加载模型包含自定义优化器报错 如何解决？
本文首发于个人博客https://kezunlin.me/post/c691f02b/,欢迎阅读最新内容! python keras RAdam tutorial and load custom op ...
- MongoDB 修改数据Cannot change the size of a document in a capped collection: * != *"
MongoDB修改数据库数据的时候报错 原因: 集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入,也就是创建集合的时候设置了capped参数为true 解决: 创建集合的时 ...
- XAF中多对多关系 （XPO）
In this lesson, you will learn how to set relationships between business objects. For this purpose, ...
- Vue-router中的history模式和hash模式
还记得在我们从零开始搭建一个Vue-cli3.0项目时,预设置中出现过这样一条询问: 即是否选择历史模式,当时我们很坚决地选了否,那么哈希模式和历史模式究竟有什么区别,今天我们来一探究竟. 哈希模式( ...
- JS基础语法---数组案例---9个练习
练习1:求数组中所有元素的和 var arr1 = [10, 20, 30, 40, 50]; var sum = 0; for (var i = 0; i < arr1.length; i++ ...