vue 里filter的基本用法

filter是和data  computed   methods watch一样,都是new Vue()的参数。

用于对简单数据的处理,和computed有冲突,所以从vue2.0后就对filter做了删减,我觉得没有filter完全能够用其他方法比如computed来实现

用在{{ 变量1 | 变量2 }} 或者 v-bind:xx=“  变量1 | 变量2([参数) ”  两种;其中变量1是data的k,变量2是filter的k,

filter:{ 变量2:function(变量1,参数){xxxx}}

 1     <div id="app">
 2         <div> {{val | upcaseVal(true)}}</div>
 3         <div v-bind:title="val | upcaseVal">{{val}}</div>
 4         <div>{{val | removeSpace}}</div>
 5     </div>
 6
 7
 8     <script>
 9         var vm = new Vue({
10             el: ‘#app‘,
11             data: {
12                 val: ‘hello world‘
13             },
14             filters: {
15                 upcaseVal: function (val, firstUpper) {//filter里函数的参数需要特别注意 第一个是指|前的值,第二个是true
16                     if (firstUpper) {
17                         return val.split(‘ ‘).map(function (e) {
18                             return e[0].toUpperCase() + e.slice(1)
19                         }).join(‘ ‘)
20                     }
21                     return val.toUpperCase();
22                 },
23                 removeSpace:function(val){
24                     return val.toUpperCase()
25                 }
26             }
27         })

原文地址:https://www.cnblogs.com/dangdanghepingping/p/10163830.html

时间: 2024-08-04 13:35:23

vue 里filter的基本用法的相关文章

vue里面的get、post和jsonp

使用vue里面的get可以获取文件数据,当获取文件数据的使用的用法是 使用get获取php文件执行结果时就是在前面的案例的get方法中传入php文件,然后设置和php相对应的数据,如下 js代码 php代码 需要注意的是,php文件中,方括号里面的名称才是与js里面的名称一致,如图所示 post使用方法与get基本相似,就是在此基础上添加一个数据:emulateJSON: true 演示结果如下图所示 post方法的php代码 需要注意的是,粗看之下,连个php文件差异不大,但是php文件里面分

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName. handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 wa

vue里操作DOM

一般来说你要在vue里操作DOM,要先在标签里加上ref="",如下: <h2 ref="s" @click="sss">Essential Links</h2> 然后在点击的事件sss写下你想要的效果代码:(注意的是上面的ref的s,要写在下面this.$refs,不要忘了) methods: { sss() { this.$refs.s.style.color = "blue"; } } 如果你想要

vue里的数据

背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件组件开发)既sfc. 本文主题 vue里数据的处理 存放数据 我们先看vue里哪里能存放数据: 1.单个vue文件里.2.官方插件vuex,作为一个集中管理经常复用的数据很有用.3.直接声明在vue实例上,用$号标识. 第一种情况下存放数据对于单个文件又分这几种属性1.1 data(常规使用,默认函

vue里的渲染以及computed的好处

如果vue里的某个methods函数执行,导致页面重新渲染,那么所有的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行. 只有在computed函数所依赖的数据变化时候才会被执行 1 <div id="app"> 2 <div></div> 3 <p>{{num}}</p>

《vue里用vux写移动端搭建环境》

vue里用vux写移动端搭建环境 一,序言 最近一直在看vue,越看越觉得有意思,由于工作需要,了解了一下vux,发现是个强大好用的UI组件库,以前用过vant,iview,其它的组件库目前还没发现,也还没用过,如果各位有好用的大方分享出来喔 ~    一起学习,一起进步!下面进入正题,vux的配置环境. 二,vux安装环境 1.安装vux npm install vux --save-dev ( 如果是3.0+的脚手架,那么可以直接在终端输入vue ui打开ui界面去安装依赖会更加方便!) 2

vue里store被意外修改

还是接着上次那个接手的项目,还是那里面的bug.还是在编辑信息的时候,用户信息是存在store里的,从个人中心页面点击编辑按钮到编辑页面,此时是正常的,但是如果在编辑页面修改了东西,没有保存,按道理来说下次进入编辑界面的时候是不应该保持上一次编辑的信息的.于是我翻看了代码里绑定数据的对象,果然,有一句代码引起了我的注意: 这句看似平常的一句代码,实际却“暗藏杀机”,打印了一下每次执行这句话之前infos的值,发现只要编辑了表单,store里infos的值也被改了,vue-store的官网上明确的

vue里ref ($refs)用法

ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意: 1.ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成.比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用. 2.如果ref 是循环出

在vue里使用codemirror的两种用法

这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能.代码显示这里用的是vue-codemirror插件. 第一种用法: 1.安装:npm install vue-codemirror --save 2.在main.js中引入 import VueCodeMirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodeMirror) 3.在组件中使用 import { codemir