首先啊感谢一位小童鞋的指出其实我写的这些内容算不上坑,只是平时使用的时候的一点小问题,不过只是个名字啦!再次致谢

1:两个简写的命令

v-bind:class可以简写为  :class

v-on:click可以简写为  @click

2:这里解释一下上面为什么会提到v-bind:class

如果你在vue项目里面想要对一个标签添加一个class的话,就必须要用到这个东西了,然后嘞!

这个v-bind:class后面的语句有特殊的写法,不能够直接放个类名在哪里,这里通常是需要写成对象形式的,数组也可以;

这里又引申出另外一个问题了,如果说当前操作的这个对象没有这个属性该怎么办--》如下

item里面没有checked这个属性怎么办?

:class="{'check':item.checked}"

这个时候我们就需要在js里面需要用到这个属性的方法里面添加

if(typeof item.checked == 'undefind')(因为没有这个属性所以在用的时候会提示undefind)

Vue.set(item,'checked',true)相当于给item注册了一个checked(详情参考文档)              

这里注册的这个属性是全局的,也可以使用 this.$set(....);同上效果一样只是作用域的区别

3:过滤器

Vue.js 允许你自定义过滤器,过滤器的写法官方文档有,这里不再赘述

就说一下全局过滤器这个东西,他可以在这个项目的任何一个页面进行调用,而局部的过滤器只能在当前实例内部进行使用

而且这个全局过滤器的写法还有点特殊,在vue1+里面过滤器里面的参数中间是通过空格进行传入的。但是在2.0里面是写在过滤器里面用 ‘ ,’ 隔开,

更加的像是调用函数,filterName(num1,num2,...);

Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;{{ message | filter }}

过滤器还可以串联:{{ message | filterA | filterB }}4:前台展示的时候如果需要小数点的话尽量把这个事情交给后台去处理,直接更改数据,并非我们前端做不到,只是这个在前端使用value.toFixed()的时候会出现精度上面的损失,这个尽量让后台处理一下数据。

结语:因为今天别的事情耽误了,所以学习的东西比较少,暂时就分享到这里。

vue的一些坑(第二天)的更多相关文章

  1. 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)

    部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...

  2. VueRouter爬坑第二篇-动态路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  3. Vue + TypeScript 踩坑总结

    vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...

  4. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  5. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

  6. Vue中的坑

    今天给大家总结了Vue中的坑,都是平常踩到的,希望对大家有所帮助 1.vuex的一个“坑” 报错原因:在使用Vuex的时候在main.js中引入的时候对名字的大小写有区别 解决法案: 错误写法: 正确 ...

  7. vue eventBus 跳坑的办法

    前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...

  8. vue中的坑 --- 锚点与查询字符串

    在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...

  9. 【Vue中的坑】路由相同参数不同无法触发路由

    场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...

随机推荐

  1. 关于XML(可扩展标记语言)的基础知识与写法

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点:1.树状结构,有且只有一个根2.标签名自定 ...

  2. 浅析ConcurrentHashMap

    一.导论 这些天一直在看关于多线程和高并发的书籍,也对jdk中的并发措施了解了些许,看到concurrentHashMap的时候感觉知识点很乱,有必要写篇博客整理记录一下. 当资源在多线程下共享时会产 ...

  3. Ajax 向后台提交一个 JavaScript 对象数组?

    var postArray= new Array(); var temp = new Object(); temp.id='1'; temp.name='test'; postArray.push(t ...

  4. Java自学手记——泛型

    泛型在集合中的应用 泛型在集合经常能看到,有两个好处:1.把运行时出现 的问题提前至了编译时:2.避免了无谓的强制类型转换. 用法:两边泛型的类型必须相同,可允许一边不写,只是为了兼容性,并不推荐. ...

  5. 记VUE的v-on:textInput无法执行事件的BUG

    <div id="wrap"> <input type="text" v-on:textInput="fn"> &l ...

  6. JVM入门——运行时数据区

    这张图我相信基本上对JVM有点接触的都应该很熟悉,可以说这是JVM入门的第一课.其中的“堆”和“虚拟机栈(栈)”更是耳熟能详.下面将围绕这张图对JVM的运行时数据区做一个简单介绍. 程序计数器(Pro ...

  7. 修改ElementUI源码实践

    提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...

  8. updateByPrimaryKey和updateByPrimaryKeySelective insert和insertSelective

    这两个update都是使用generator生成的mapper.xml文件中,对dao层的更新操作 updateByPrimaryKey对你注入的字段全部更新(不判断是否为Null) updateBy ...

  9. Kinect 常用识别手势

    以下手势能被流畅的识别: ◎RaiseRightHand / RaiseLeftHand – 左手或右手举起过肩并保持至少一秒 ◎Psi –双手举起过肩并保持至少一秒 ◎Stop – 双手下垂. ◎W ...

  10. 使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

    上文<使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word>介绍了如何使用 VS2017 开发 electron 桌面程序,今天来点有看头的,但是 ...