vue的一些坑(第二天)
首先啊感谢一位小童鞋的指出其实我写的这些内容算不上坑,只是平时使用的时候的一点小问题,不过只是个名字啦!再次致谢
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的一些坑(第二天)的更多相关文章
- 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)
部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...
- VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...
- Vue中的坑
今天给大家总结了Vue中的坑,都是平常踩到的,希望对大家有所帮助 1.vuex的一个“坑” 报错原因:在使用Vuex的时候在main.js中引入的时候对名字的大小写有区别 解决法案: 错误写法: 正确 ...
- vue eventBus 跳坑的办法
前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...
- vue中的坑 --- 锚点与查询字符串
在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...
- 【Vue中的坑】路由相同参数不同无法触发路由
场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...
随机推荐
- asp.net使用qq邮箱发送邮件
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...
- 使用Scribefire在博客中插入语法高亮 II
效果如下, 这是我们在Scribefire中添加的code按钮,单击此按钮,则会出现 在codeHere中直接输入代码就可以了. 查看html 可以看到,其中已经添加了<pre>标签. 下 ...
- TSC打印机使用教程终极版
最近公司做一个资产采集的项目,之前做过此类项目,不过没有整理资料,借这次机会写一下,做个记录. 本教程使用的打印机型号:TSC TTP-244 Plus 官方文档 一.TSC打印机安装 1.机 ...
- 接水问题【NOIP2010普及组】优先队列
题目描述 学校里有一个水房,水房里一共装有 m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为 1. 现在有 n 名同学准备接水,他们的初始接水顺序已经确定.将这些同学按接水顺序从 1到 n ...
- CCS学习(三)
边框样式 边框线 dorder-style (top 上: bottom 下: left 左: right 右) 样式:none | hidden | dotted | dashed | sol ...
- 如何使用SVN?
一.什么是SVN? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁 ...
- 进击的AssetBundles和它的工具们
0x00 前言 周末的时候在家看了下去年的Unite16 LA的视频.其中一个session很有趣,是AssetBundles开发团队Reichert的一个"总结过往,畅想未来"的 ...
- JVM入门——运行时数据区
这张图我相信基本上对JVM有点接触的都应该很熟悉,可以说这是JVM入门的第一课.其中的“堆”和“虚拟机栈(栈)”更是耳熟能详.下面将围绕这张图对JVM的运行时数据区做一个简单介绍. 程序计数器(Pro ...
- int-整数+bool-布尔功能介绍
int #创建和转换 #a = 123#a = int(123)#转换 #Age = "22"#Age = int(22)#1.当前整数用二进制表示的最小位数 # age = 50 ...
- java中变量赋值的理解
1.当赋值的值超出声明变量的范围时候,会报错! byte a =200 //会报错,因超出范围. byte a =(byte)200;//进行一个强制转换,就不会报错,不过会超出范围,超出部分会从头开 ...