vue 笔记 实例方法和计算属性还有过滤器

vue实例方法语法

methods:{

方法名:function(){ }

简化写法：方法名(){}

}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
    a:<input type='text' v-model="a" />+ b:
    <input type='text' v-model='b'>= {{sum()}}
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                a: "",
                b: "",
            }
        },
        methods: {
            sum() {
                return parseInt(this.a * 1) + parseInt(this.b * 1)
            }
        }
    })
</script>

计算属性

模板内使用表达式非常便利，但是如果在模板中放入太多的逻辑会让模板过重，且难以维护，所以对于任何复杂逻辑，都应当使用计算属性

computed:{

方法名字：function(){}

简写：方法名字（）{}

}

翻转字符串

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
    <p>原字符串: {{ msg }}</p>
    <p>计算属性反转字符串: {{ rmovemsg }}</p>
    <p>实例方法翻转字符串：{{add()}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello,world!'
        },
        computed: {
            rmovemsg: function() {
                return this.msg.split("").reverse().join('');
            }
        },
        methods: {
            add() {
                return this.msg.split("").reverse().join('');
            }
        }
    })
</script>

过滤器

过滤器，就是将数据被渲染到视图之前进行格式化处理，而不会修改作用域中原有的数据

原则是：左值右量（变量也可以不写）

语法

filtere:{

过滤器：function(参数1,参数2){} 

过滤器（参数1,参数2）{}

Vue.filter()

说明：定义过滤器时，必须声明参数，并且参数1是固定的，指的是要操作的数据，剩余的参数是调用过滤器时传递进来的

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div class="test">
    {{messaga | capitalize}} {{message | capitalize}} {{messagb | capitalize}}
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: ".test",
        data: {
            messaga: "abc",
            message: "def",
            messagb: "ghi"
        }
    })
</script>

简写购物车

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
    <ul>
        <li v-for="good of goods">
            <input type="checkbox" @click="checkbox(good)" />
            <span>商品名称:{{good.goodname}}</span>
            <input type="button" value="-" @click="changeNum(0,good)" />
            <input type="number" v-bind:value="good.num || 0" />
            <input type="button" value="+" @click="changeNum(1,good)" />
            <span>单价:{{good.price}}</span>
            <span>小计:{{((good.num*good.price)?(good.num*good.price):0)|price}}</span>
        </li>
    </ul>
    <p>总金额:{{allPrice | price}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            goods: [{
                'id': 0,
                'goodname': '肥皂',
                'price': 4.3
            }, {
                'id': 1,
                'goodname': '洗发水',
                'price': 34
            }, {
                'id': 2,
                'goodname': '洗衣粉',
                'price': 7.3
            }],
            goodnumber: null,
        },
        methods: {
            // 改变数量
            changeNum(arg1, item) {
                if (!item.num) {
                    // $set是添加值
                    this.$set(item, 'num', 0);
                }
                // 判断为真的时候为增加的方法,否则为假的方法
                if (arg1) {
                    item.num++;
                } else {
                    item.num--;
                }
            },
            // 设置选中与不选中
            checkbox(item) {
                if (item.active) {
                    this.$set(item, 'active', false);
                } else {
                    this.$set(item, 'active', true);
                }
                console.log(item);
            }
        },
        filters: {
            price(arg) {
                return arg.toFixed(2) + '元';
            }
        },
        computed: {
            // 计算总价
            allPrice() {
                var result = 0;
                for (var i in this.goods) {
                    if (this.goods[i].active) {
                        result += this.goods[i].price * this.goods[i].num;
                    }
                }
                return result;
            }
        }
    })
</script>

计算属性和实例方法区别：

计算属性有缓存，而实例方法没有缓存

使用计算属性的时候，{{计算属性名}}

使用实例方法时，{{方法名()}}

参数的传递 实例方法可以传递参数 但计算属性不能

计算属性和实例方法共同点：

数据的监听 计算属性和实例 都会监听原数据（数据改变 逻辑重新执行）