vue计算属性

计算属性

依赖data的数据进行处理操作，最终返回新的数据值。

计算属性：

computed:{
	sum(){
		if(this.a>100){
			return 'hello';
		}else{
			return 'hi';
		}
	}

}

使用：直接加载计算属性函数名，data中不能存在同名属性

<p>{{ sum }}</p>

（1）在模板中表达式非常便利，但是它们实际上只用于简单的操作。
（2）模板就是为了描述视图的结构。在模板中放入了太多的逻辑会让模板过重且难以维护。这就是为什么Vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

购物车满运费

结构：
样式：table居中，margin:100px auto：

<table class="tab" id="app">
        <tr>
            <td>单价：</td>
            <td><input type="text" v-model="perprice"></td>
            <td>元</td>
        </tr>
        <tr>
            <td>数量：</td>
            <td><input type="text" v-model="count"></td>
            <td>个</td>
        </tr>
        <tr>
            <td>邮费：</td>
            <td> <span>{{ express }}</span> </td>
            <td>元</td>
        </tr>
        <tr>
            <td>总价：</td>
            <td> <span> {{ getSumprice }} </span> </td>
            <td>元</td>
        </tr>
    </table>

引入vue.js

var app = new Vue({
            el: '#app',
            data: {
                perprice: '',
                count: '',
                express: 10,
                sumprice: 10
            },
            computed: {
                getSumprice(){
                    if(this.count>8){
                        this.express=0;
                    }else{
                        this.express=10;
                    }
                    this.sumprice = this.perprice*this.count+this.express;
                    return this.sumprice;
                }
            }
        })

输入框的模糊查询

结构：

<div id="app">
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in getSearch">{{ item }}</li>
    </ul>
</div>

第一种方式：

 <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                search: "",
                list: ['没有勇气去想的更远','曾经是心心念念','如果没有你 我将会是在哪里','突然好想你，你会在哪里','想念如果会有声音','我好想你，在起风的夜里'],
                newlist: []

            },
            computed: {

                getSearch(){
                    // 设置新数组newArr
                    let newArr = [];
                    this.list.map((item)=>{
                    	// 如果存在，放到新数组中
                        if(item.indexOf(this.search)!=-1){
                            newArr.push(item);
                        }

                    });
                    // 返回新数组
                    return newArr;
                }
            }
        });
    </script>

第二种方式：

getSearch(){
	// 数组的filter方法，是ES5方法
	// 用于过滤出满足条件的数组元素
	return this.list.filter((value)=>{
		// 字符串的includes方法，是ES6方法
		// 用于判断该字符串this.search在value中是否存在，存在为true，不存在为false
		return value.includes(this.search);
	});
}