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

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. 【Android Developers Training】 61. 序言:使用OpenGL ES显示图像

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. 【Android Developers Training】 44. 控制你应用的音量和播放

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  3. Swift 路由机制设计

    设计模式 APP设计模式多种多样,从最初的MVC到MVVM,再到MVP,VIPER等.越来越多的设计模式被开发出来并得以应用,但不论我们用到哪种设计模式,只需要记住高内聚.低耦合那边是好的设计模式.在 ...

  4. 关于DOM中的model(将元素转成对象进行操作)

    DOM document (html, xml) object 将文档中的HTML元素转成js的对象 通过ID找到文档的元素转成js对象 var obj = document.getElementBy ...

  5. Flex Robotlegs

    Flex Robotlegs 一.基于Robotlegs框架 flex应用基本组成 ProjectNameContext.as 用于配置 Robotlegs 的映射 ProjectName.mxml ...

  6. 想从事IT行业的你,一定看看这篇文章

    很多想从事IT行业的小伙伴都会问: 我该如何学习技术? 我应该选择什么样的方向来深入学习并以此来就业? 如何证明自己的技术很牛? 什么是程序员的核心竞争力? 如何成为一名优秀的工程师? 对于这些疑问, ...

  7. 计算机程序的思维逻辑 (91) - Lambda表达式

    ​在之前的章节中,我们的讨论基本都是基于Java 7的,从本节开始,我们探讨Java 8的一些特性,主要内容包括: 传递行为代码 - Lambda表达式 函数式数据处理 - 流 组合式异步编程 - C ...

  8. Mysql元数据分析

    Mysql元数据分析 @(基础技术) 一.information_schema库 information_schema库中的表,保存的是Mysql的元数据. 官网元数据表介绍 InnoDB相关的表介绍 ...

  9. 学会git玩转github,结尾有惊喜!有惊喜!有惊喜!

    一.什么是Github Github是全球最大的社交编程及代码托管网站(https://github.com/). Github可以托管各种git库,并提供一个web界面(用户名.github.io/ ...

  10. JFile的导入xlsx与xls

    首先需要有JAVA的一些jar包 下载地址:http://download.csdn.net/detail/qq_35980546/9892511 你要先配置好路由,还有能拿到绝对路径才行 下面直接给 ...