vue笔记之 filterts的几种用法

先上一段代码:

   <div class="test">
            <p>{{msg | sum}}</p>
            <p>{{msg | cal 10 20}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->
            <p>{{msg | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
 
            <input type="text" v-model="msg | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
 
        </div>
        <script type="text/javascript">
            Vue.filter("change", {
                read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
                    return value;
                },
                write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
                    console.log("newVal:"+newVal); 
                    console.log("oldVal:"+oldVal);
                    return newVal;
                }
            });
 
            var myVue = new Vue({
                el: ".test",
                data: {
                    msg:12
                },
                filters: {
                    sum: function (value) {
                        return value + 4;
                    },
                    cal: function (value, begin, xing) {
                        return value + begin + xing;
                    }
                }
            });
 
        </script>

=================================================================================

注册在全局的fliter
(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 
(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算 
(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 
(4)用户从input输入的数据在回传到model之前也可以先处理
(5)filter是默认会传入当前的item,而且filter的第一个参数默认就是当前的item。 
注册在实例化内部

仅在使用它的实例里面注册

1.在html中使用
{{ msg | filter('arg1','arg2') }}
// msg对应函数中的第一个参数data,arg1为第二个参数,类推

过滤器可以串联:

  {{ msg | filterA | filterB}}
2.methods中使用,并传参
  methods:{
    fn(){
        let filter = this.$options.filters['filter']
        let data = filter(this.msg,arg1,arg2)
    }
  }
3.在v-html中使用filters
  <p v-html="$options.filters.filter(this.msg,arg1,arg2)"></p>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中计算属性有几种用法,以下是常见的几种用法: 1. 基本用法:使用 `computed` 关键字定义计算属性,然后在模板中使用。例如: ```javascript const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } }) ``` 2. Getter 和 Setter:可以通过 `get` 和 `set` 方法来定义计算属性的 getter 和 setter。例如: ```javascript const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(value) { const names = value.split(' ') this.firstName = names[0] this.lastName = names[1] } } } }) ``` 3. 计算属性的缓存:Vue 3 中的计算属性默认是有缓存的,只有在它依赖的响应式数据发生变化时才会重新计算。这可以提高性能。例如: ```javascript const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { console.log('computed fullName called') return this.firstName + ' ' + this.lastName } } }) ``` 4. 计算属性的依赖:计算属性可以依赖于其他计算属性。当依赖的计算属性发生变化时,依赖它的计算属性会重新计算。例如: ```javascript const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName }, greeting() { return 'Hello, ' + this.fullName } } }) ``` 以上是 Vue 3 中计算属性的几种常见用法,希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值