Vue笔记：Vue小练习

 

 

div切换

<template>
    <div id="app">
       <div class="tab-tit">
        <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
        <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
        <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
        <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
        <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
        </div>
        <div class="tab-con">
            <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
            <div v-show="curId===0">
                html<br/>
            </div>
            <div v-show="curId===1">
                css
            </div>
            <div v-show="curId===2">
                javascript
            </div>
            <div v-show="curId===3">
                vue
            </div>
        </div>
    </div>

</template>


<script>
    export default {
       data(){
        return{
            curId:1,
        }
    },
}
</script>

<style  scoped>
    body{
        font-family:"Microsoft YaHei";
    }
    #app{
        width: 600px;
        margin: 0 auto;
    }
    .tab-tit{
        font-size: 0;
        width: 600px;
    }
    .tab-tit a{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 25%;
        text-align: center;
        background: #ccc;
        color: #333;
        text-decoration: none;
    }
    .tab-tit .cur{
        background: #09f;
        color: #fff;
    }
    .tab-con div{
        border: 1px solid #ccc;
        height: 400px;
        padding-top: 20px;
    }
</style>

 

 

 

购物车

<template>
    <div id="app">
      <div v-if="books.length==0">
        购物车为空

    </div>
    <div v-else>
        <table>

        <thead>
            <tr>
                <th></th>
            <th>书籍</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>

            </tr>

        </thead>

        <tbody>
            <tr v-for='(value,index) in books'>
                <td >{{value.id}}</td>
                <td >{{value.name}}</td>
                <td >{{value.date}}</td>
                <td >{{value.price | showPrice}}</td>    <!--使用过滤器改变金额格式-->
                <td >
                    <button @click="decrement(index)" v-bind:disabled="value.count <=1">-</button> <!--按钮失效-->
                    {{value.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td >
                    <button @click='remove(index)'>移除</button>
                </td>
            </tr>

        </tbody>

    </table>
        <h2 >总价格为{{totalPrice | showPrice}}</h2>
    </div>
    </div>

</template>


<script>
    export default {
       data(){
        return{
            books:[
            {
                id:1,
                name:'小黄书',
                date:'2020-09',
                price:80.00,
                count:2
            },
            {
                id:2,
                name:'博人传',
                date:'2020-09',
                price:51.00,
                count:2
            },
            {
                id:3,
                name:'王书',
                date:'2020-09',
                price:80.00,
                count:2
            },
            {
                id:4,
                name:'牛逼书',
                date:'2020-09',
                price:80.00,
                count:2
            }
        ]
        }
        },
        computed:{
            totalPrice(){
                let total = 0;
                for(let i = 0; i < this.books.length; i++){
                    total += this.books[i].price * this.books[i].count;
                }
                return total;
            }
        },
        methods:{
            increment(index){
                console.log('hello'+index);
                this.books[index].count++;
            },
            decrement(index){
                if(this.books[index].count>=2){
                    console.log('world'+index);
                this.books[index].count--;
                }
            },
            remove(index){
                this.books.splice(index,1);/*移除*/
            }
        },
        filters:{
            showPrice(price){
                return '￥'+price.toFixed(2);/*保留两位小数*/
            }

        }
}
</script>

<style  scoped>
   table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    }
    th,td{
        padding:8px 16px;
        border:1px solid #E9E9E9;
        text-align: left;
    }
    th{
        background-color: #f7f7f7;
        color:#5c6b77;
        font-weight: 600;
    }

</style>