vue基础实例

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
    li.selected{
        border: 1px solid;
    }
    /*斗篷*/
    [v-cloak]{
        display: none;
    }
</style>
<body >
    <div id="app" v-cloak>
        <ul>
            <li @click="click_me(k)" v-for="(v,k) in books" :style="{color:v.color,fontSize:v.size}" class="demo" :class="{selected:v.is_selected}"> {{ v.name }}</li>
        </ul>
        <div>总价{{ total_price }}</div>
    </div>
</body>
<script type="text/javascript">
    const app = new Vue({
        el : "#app",
        data : {
            books : [
                {name:'22',price:33,size:18,color:"blue",is_selected:false},
                {name:33,price:12,size:14,color:"red",is_selected:false}
            ]
        },
        methods : {
            click_me : function (k) {
                this.books[k].is_selected = !this.books[k].is_selected;
            },
        
        },
        // 计算属性
        computed : {
            total_price : function(){
                var total_price = 0;
                for(var i in this.books){
                    total_price += this.books[i].price;
                }
                return total_price;
            }
        }
    })
        
        
</script>
</html>

 

posted @ 2019-11-13 08:09  cl94  阅读(143)  评论(0编辑  收藏  举报