04、Vue-计算属性

01-计算属性的基础使用

下例为计算属性的使用方式:

<script src="../js/vue.js"></script>
<div id="app">
    <h2>{{firstName+' '+lastName}}</h2>
    <h2>{{getName()}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            firstName:'Gui',
            lastName:'Gethin',
        },
        computed:{
            fullName:function () {
                return this.firstName+' '+this.lastName
            }
        },
        methods:{
            getName:function () {
                return this.firstName+' '+this.lastName
            }
        }
    })
</script>

02-计算属性的复杂操作

下例为使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    <h2>总价格:{{totalprice}}</h2>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            books:[
                {
                id:110,
                name:'vue',
                price:10},
                {
                 id:99,
                 name:'script',
                 price:10
                },
                {
                id:100,
                name:'java',
                price:20
                }
            ]
        },
        computed:{
            totalprice:function () {
                let result=0;
                for (let i=0;i<this.books.length;i++){
                    result +=this.books[i].price
                }
                return result
            }
        }
    })
</script>
</body>
</html>
# Vue  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×