vue过滤器和监视器的小例子
过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|
(管道符),默认传递参数,如果还要传递参数就要手动传递
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数
过滤器可以用在两个地方:双花括号插值和 v-bind
表达式
<template>
<div class="hello">
我是about0页面
<div id="div1">
{{name | formatname}}
<!--<span v-text="name | wrapAB(5)"></span>-->
<input type="text" v-model="name">
<h2>{{name}}</h2>
<hr>
<input type="text" v-model="age">
<h2>{{age}}</h2>
<input type="text" v-model="user.age">
<h2>{{user.age}}</h2>
<el-button @click="dosubmit" type="primary">提交</el-button>
</div>
</div>
</template> <script> import {formatDate} from '../util/filters'
export default {
name: 'about',
data () {
return {
name:'Tom',
age:,
user:{
id:,
age:
}
}
},
methods:{
dosubmit(){
this.user.id=Math.random();////深度监视,当对象中的属性发生变化时会被监控 //方式二:监控vue实例的数据
//当按钮被点击一次以后,全局上就被监听了,只要变就会console
this.$watch('name',function(newValue,oldValue){
console.log('name的newValue值为:'+newValue+',旧值为:'+oldValue);
}); }
},
watch:{
//方式一:监控vue实例的数据
age:(newValue,oldValue) => {
console.log('name的newValue值为:'+newValue+',旧值为:'+oldValue);
},
user:{
handler:(newValue,oldValue) => {
console.log('age的newValue值为:'+newValue.age+',旧值为:'+oldValue.age);
//原来的旧值已经看不见了,只能看到新的值
},
deep: true //深度监视,当对象中的属性发生变化时会被监控
}
},
filters: {
formatname (value) {
return value.split('').reverse().join('')
},
//多参数传值有问题,无解
//wrapAB(value, val) {
// return value+val
//}
} }
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
vue过滤器和监视器的小例子的更多相关文章
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- Vue.js的小例子--随便写的
1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期
学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...
- 详细解读Android中的搜索框(一)—— 简单小例子
这次开的是一个讲解SearchView的栏目,第一篇主要是给一个小例子,让大家对这个搜索视图有一个了解,之后再分布细化来说. 目标: 我们先来定个目标,我们通过搜索框来输入要搜索的联系人名字,输入的时 ...
随机推荐
- hrbustoj 1305:多边形(计算几何,极角排序练习)
多边形 Time Limit: 1000 MS Memory Limit: 65536 K Total Submit: 113(42 users) Total Accepted: 51(3 ...
- Python+selenium之简单介绍unittest单元测试框架
Python+selenium之简单介绍unittest单元测试框架 一.unittest简单介绍 unittest支持测试自动化,共享测试用例中的初始化和关闭退出代码,在unittest中最小单元是 ...
- ASP.NET MVC5 新特性:Attribute路由使用详解
1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...
- 使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手冊
一.所需工具 1,JDK:生成 2.安卓SDK开发环境 3,NodeJs:主要使用的还是npm 4,Python开发环境 5.VS 2012(2008,2015也能够,已亲測):安装这个主要是须要一些 ...
- System.in中的read()方法
大家先来看例如以下这个程序 public class TestInputStream { public static void main(String args[]) throws IOExcepti ...
- Hadoop1.2.1 出现Warning: $HADOOP_HOME is deprecated.的解决方案
通过启动或停止hadoop我们会发现会出现 “Warning: $HADOOP_HOME is deprecated” 这样一个警告,下面给出解决方案: 不过我们一般推荐第二种,因为我们还是需要$HA ...
- StepVR插件容易出现的坑------项目设置一定要勾选Start in VR或者在exe快捷方式中添加-vr参数
- ios 自定义UITableView中分组的标题sectionview
//Section的标题栏高度 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)sec ...
- ios 更改UITableview中Section的字体颜色
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UILabel *c ...
- jquery如何把一个html元素替换成另外一个html元素?
1.replaceWith( ) 使用括号内的内容替换所选择的内容. $("#div").replaceWith("<p id=&qu ...