vue 使用瞬间

  一, 图片类

    <img :src="data.deptLogo | imgUrl" onerror="this.src='../img/headDefaltImg.png'"/>
    注释:   
      1)  :src中的单竖线是引用 fifter(过滤器)  
      2)  onerror 代表src路径无效时, 我们需要定义一个默认值
      3)  :onerror  也可以使用变量(切记加冒号)    变量格式为:   logo: ' this.src= " ' + require( ' ../assets/img.png ' ) + ' " '

  二, fifter过滤器

<div id="test" v-cloak>
<p>{{message | sum}}</p>
<p>{{message | cal(,)}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
</div> <script type="text/javascript"> // -----------------------------------------华丽分割线(从model->view)---------------------------------------
Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + ;
}); Vue.filter('currency', function(value) {
return value * ;
}) Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
console.log(begin)
return value + begin + xing;
});
</script>

    备注: filterg过滤器不可使用与input, 如遇input中使用, 请调用 compound 计算属性

vue 使用瞬间的更多相关文章

  1. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  2. vue实现一个移动端屏蔽滑动的遮罩层

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...

  3. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  4. vue.js快速搭建图书管理平台

      前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用.   1.DEMO样式 首先我们需要搭建一个简单的demo样式 ...

  5. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  6. vue 组件中数组的更新

    今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...

  7. 从javascript发展说到vue

    Vue是基于javascript的一套MVVC前端框架,在介绍vue之前有必要先大体介绍下javascript产生背景及发展的历史痕迹.前端MVVC模式等,以便于大家更好的理解为什么会有vue/rea ...

  8. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  9. 从零开始设计数据大屏—基于Vue ZT

    虽然已经决定这个项目用Wyn来做了,但是,了解一下如何从头开始写一个数据大屏还是挺有好玩的. ------------- 为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的 ...

随机推荐

  1. Selenium for C#(一) 环境安装

    Selenium 环境安装 本地环境为VS2015,由于selenium 官网不知什么原因打不开. 特记录下VS上使用NuGet安装Selenium的步骤. 利用Package Manager Con ...

  2. Shiro权限管理

    1.简介 Apache Shiro是Java的一个安全框架,对比Spring Security,没有Spring Security功能强大,但在实际工作时可能并不需要那么复杂,所以使用小而简单的Shi ...

  3. ngx_string()错误分析

    #define ngx_string(str) { sizeof(str) - 1, (u_char) str } typedef struct { uint len; u_char* data; } ...

  4. loj题目总览

    --DavidJing提供技术支持 现将今年7月份之前必须刷完的题目列举 完成度[23/34] [178/250] 第 1 章 贪心算法 √ [11/11] #10000 「一本通 1.1 例 1」活 ...

  5. linux服务器内存、根目录使用率、某进程的监控告警脚本

    脚本内容如下 #!/bin/bash #磁盘超过百分之80发送邮件告警 DISK_USED=`df -T |sed -n "2p" |awk '{print ($4/$3)*100 ...

  6. deepin(debian)下使用Git

    Github github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开. 安装git 安装 sudo apt-get install g ...

  7. vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    用法:与mounted,created等同级并列. export default { data() { return { } }, methods: { go() { this.$router.pus ...

  8. mycat+mysql集群:实现读写分离,分库分表

    1.mycat文档:https://github.com/MyCATApache/Mycat-doc       官方网站:http://www.mycat.org.cn/ 2.mycat的优点: 配 ...

  9. kmp算法:

    自学kmp算法: first time:wa #include<cstdio> #include<algorithm> #include<iostream> #in ...

  10. Redis实战 - 2.list、set和Sorted Set

    List Redis的List是通过Linked List(链表)来实现的String集合,所以插入数据的速度很快. 但是缺点就是在数据量比较大的时候,访问某个数据的时间可能会很长,但针对这种情况,可 ...