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

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. 6位密码框js

    !DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content=&quo ...

  2. python迭代器生成器(二)

    其他内置类型迭代器 除了文件以及列表这样的实际的序列外,其他类型也有适合的迭代器. 遍历字典的经典方法是明确的获取其键的列表. 在最近的python版本中,字典有一个迭代器,在迭代环境中,会自动一次返 ...

  3. 使用Homebrew安装MySQL

    安装命令: brew install mysql 安装完成之后,启动mysql: mysql.server start 发现无此命令: command not found 首先,检查是否是安装了.重新 ...

  4. Newtonsoft.Json输出JSON 时动态忽略属性

    一,前言 最近做项目采用Json形式和其他客户端交互,借助于Newtonsoft.Json . 由于业务场景不同,输出的Json内容也不同.要想忽略的属性,可以借助Newtonsoft.Json的特性 ...

  5. chrome浏览器iframe兼容性问题,隐藏起来再显示滚动条消失?

    前言:在调试页面时发现谷歌浏览器bug,版本: 58.0.3029.81 问题描述: 1. 页面中,选项卡里面是IFrame,页面初始显示时有纵向滚动条出现 2. 来回切换选项卡一次,原来选项卡页面的 ...

  6. ORM的概念, ORM到底是什么

    一.ORM简介         对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使 ...

  7. 软考 程序员 下午考题 c语言 笔记

    1. 数组名 是表示数组空间首地址的指针常量,程序中不允许对常量赋值. 如 int  a[];   a就是数组名,表示数组控件首地址的指针常量 a = 0;是错误的,不允许对指针常量赋值 &a ...

  8. hdoj 1251 字典树||map

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  9. Centos7yum安装Redis详细教程

    原本是在自己的mac上安装redis的,通过brew去安装的redis觉得很简单,实际macos系统与centos系统还是有一些区别的. 1.yum安装redis服务 sudo yum install ...

  10. shiro整合oauth

    一.基本思路脑图 二.客户端shiro配置 shiro配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...