4.vue中的计算属性

1.计算属性：
1.当js的表达式逻辑过于复杂时，我们应当考虑计算属性。计算属性是以函数形式，在vue实例的选项对象的computed选项中定义。
2.计算属性和方法的不同之处在于计算属性是基于他的响应式依赖进行缓存的，只有在计算属性的相关响应式依赖发生改变时才会重新求值。
3.将v-for和v-if一起使用，在渲染列表是，根据v-if指令的条件判断来过滤列表中不满足条件的列表项，实际上这个功能也可以使用计算属性来完成
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>计算属性</title>
</head>
<body>
<!--
在计算属性中默认只有getter，因此是不能直接修改计算属性的，
如果需要也可以提供一个setter
-->
<div id="app">
<p>First name: <input type="text" v-model="firstName"></p>
<p>Last name: <input type="text" v-model="lastName"></p>
    <p>{{fullName}}</p>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Smith',
            lastName:'will',
        },
        computed:{
            fullName: {
                //getter
                get:function () {
                    return this.firstName + ' ' +this.lastName
                },
                //setter 方法
                set:function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length -1]
                }

            }
        }
    });
</script>
</body>
</html>


关于之前整合的实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind</title>
    <style>
        body{
            width:60px;
        }
        table{
            border: 1px solid black;
        }
        table{
            width: 100%;
        }
        th{
            height: 50px;
        }
        th,td{
            border-bottom: 1px solid #dddddd;
            text-align: center;
        }
        span{
            float: right;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--
结合之前的知识进行一个整体的购物车练习
-->
<div id="app" v-cloak>
   <table>
       <tr>
           <th>序号</th>
           <th>商品名称</th>
           <th>单价</th>
           <th>数量</th>
           <th>金额</th>
           <th>操作</th>
       </tr>
       <tr v-for="(book,index) in books" :key="book.id">
           <td>{{book.id}}</td>
           <td>{{book.title}}</td>
           <td>{{book.price}}</td>
           <td>
               <button :disabled="book.count===0" @click="book.count-=1">
                  -
               </button>
               <button @click="book.count+=1">
                   +
               </button>
           </td>
           <td>
               {{itemPrice(book.price,book.count)}}
           </td>
           <td>
               <button @click="deleteItem(index)">删除</button>
           </td>
       </tr>
   </table>
    <span>总价：{{totalPrice}}</span>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           books:[
               {id:1,title:'Vue.js从入门到实战',price:98,count:1},
               {id:2,title:'Vue.js从入门到入坟',price:198,count:1},
               {id:3,title:'java并发编程原理',price:298,count:1}
           ]
        },
        methods:{
            itemPrice(price,count){
                return price * count;
            },
            deleteItem(index){
                this.books.splice(index,1);
            }
        },
        computed:{
            totalPrice(){
                let  total = 0;
                for (let book of this.books ){
                    total+=book.price * book.count;
                }
                return total;
            }
        }
    });
</script>
</body>
</html>