vue教程(二)--过滤器和监视改动功能
过滤器filter:
1、将数据进行添油加醋的操作。
2、过滤器分两种: 组件内的过滤器(组件内有效)、 全局过滤器
组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回最终数据。 例如 filters:{transName:function(){reteurn ''}}
全局过滤器: Vue.filter(过滤器名:过滤器函数fn);例如:Vue.filter('transName',function(arg....){return ''})
3、过滤器是先注册再使用
4、用法 {{变量|过滤器名(参数1,参数2......)}}
监听watch(单个),cumputed(监听多个)
1、用法watch(key属于data中声明的变量名,value是监视后的行为)
watch:{
myName:function(newValue,oldValue){
}
}
注:如果watch监视复杂类型的数据 比如users:[{name:''abc}], 如果按上述监听,怎么监听失败,因为对于复杂类型的数据,watch监听的是对象的地址,而不是属性的值。所以需要
深度监听。一般复杂类型 Object || array,用法如下:
watch:{
deep:true,
handler:function(newValue,oldValue){
}
}
2、cumputed(监听多个) 用法
例如 要实现 a+b = {{result}}的例子,a、b分别代表的是data里面声明的变量,a\b任何一个的变化都会影响result的输出,这时可以使用cumputed,
cumputed:{
//监听result属性
result:function(){
//监视对象,凡是写在该方法内的所有this.变量,都会被监听执行该方法。
return this.a+this.b;
}
}
git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址
技术交流群:
vue教程(二)--过滤器和监视改动功能的更多相关文章
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- Vue教程:过滤器filters(五)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- vue教程二 vue组件(3)
给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- vue教程二 vue组件(2)
每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...
- vue教程二 vue组件(1)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- Vue学习之过滤器和自定义指令小结(三)
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- vue教程1-07 模板和过滤器
vue教程1-07 模板和过滤器 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> < ...
- PySide——Python图形化界面入门教程(二)
PySide——Python图形化界面入门教程(二) ——交互Widget和布局容器 ——Interactive Widgets and Layout Containers 翻译自:http://py ...
随机推荐
- 用shell做简单的分布式计算
# 分布式计算小试 # .首先获取本机host,作为实际计算时分区hash的种子 # .以*.*.*.44为主节点,*.*.*.///43为从节点 hash=`cat /root/data/host. ...
- spark streaming 接收kafka消息之二 -- 运行在driver端的receiver
先从源码来深入理解一下 DirectKafkaInputDStream 的将 kafka 作为输入流时,如何确保 exactly-once 语义. val stream: InputDStream[( ...
- redis连接错误3种解决方案System Error MISCONF Redis is configured to save RDB snapshots
redis连接错误System Error MISCONF Redis is configured to save RDB snapshots, but XX 情况1解决办法: 由于强制停止red ...
- sql server使用公用表表达式CTE通过递归方式编写通用函数自动生成连续数字和日期
问题:在数据库脚本开发中,有时需要生成一堆连续数字或者日期,例如yearly report就需要连续数字做年份,例如daily report就需要生成一定时间范围内的每一天日期.而自带的系统表mast ...
- 查看weblgic/Tuxedo/WebSpere(WAS)/Tomcat中间件版本
1.中间件 1.1 Weblogic WebLogic的版本信息.JDK信息.参数配置均可通过控制台查看. 软件版本 [命令]more /weblogic/bea/logs/log.tx ...
- abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- python算法与数据结构-数据结构中常用树的介绍(45)
一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...
- git常用总结
git 基本配置 安装git yum -y install git git全局配置 git config --global user.name "lsc" #配置git使用用户 g ...
- 小白开学Asp.Net Core 《五》
小白开学Asp.Net Core<五> —— 使用.Net Core MVC Filter 一.简介 今天在项目(https:/ ...
- sql语句的注意点
select * from CallRecords where CallerNumber=001 and TelNum=02088888881 or id=1; 如果 CallerNumber=0 ...