vue学习02

最新推荐文章于 2024-10-08 21:53:07 发布

小疯子青

最新推荐文章于 2024-10-08 21:53:07 发布

阅读量864

点赞数

分类专栏：笔记文章标签： html ajax javascript

本文链接：https://blog.csdn.net/a1773570500/article/details/123735422

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

样例代码一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<div id="app">
    <ul>
        <li v-for="(item,index) in movies"
            :class="{active:currentIndex===index}"
            @click="liclick(index)"
        >{{item}}
        </li>
    </ul>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            movies: ['海王', '海王2', '海王3', '海王4'],
            currentIndex: 0
        },
        methods:{
            liclick(index){
                this.currentIndex=index;
            }
        }
    })
</script>
</body>
</html>

样例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
    <div v-if="books.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>价格2</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{getFinalPrice(item.price)}}</td>
                <td>{{item.price|showPrice}}</td>
                <td>
                    <button @click="decrement(index)"
                            v-bind:disabled="item.count <= 1">-
                    </button>
                    {{item.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td>
                    <button @click="removeClick">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h2>总价格:{{totalPrice|showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

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;
}

const app = new Vue({
    el: "#app",
    data: {
        books: [{
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }, {
            id: 2,
            name: '《算法导论2》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }, {
            id: 3,
            name: '《算法导论3》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }
        ]
    },
    methods:{
        getFinalPrice(price){
            return '￥'+price.toFixed(2)
        },
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        removeClick(index){
            this.books.splice(index,1)
        }
    },
    computed:{
        totalPrice(){
            let totalPrice=0;
            for(let i=0;i<this.books.length;i++){
                totalPrice+=this.books[i].price+this.books[i].count
            }
            return totalPrice;
        }
    },
    filters:{
        showPrice(price){
            return '￥'+price.toFixed(2)
        }
    }
})

在这里插入图片描述