Vue.js实战第五章练习一

最新推荐文章于 2022-02-09 20:17:00 发布

liu_chen_xi

最新推荐文章于 2022-02-09 20:17:00 发布

阅读量852

点赞数 1

分类专栏： vue 文章标签： vue.js html

本文链接：https://blog.csdn.net/liu_chen_xi/article/details/105806972

版权

这篇博客介绍了如何在Vue.js中实现一个表格的全选功能，通过双向绑定数据实现选中商品的总价计算。作者对比了早期前端开发中DOM操作的繁琐，强调了Vue.js数据驱动的优势，并分享了使用Vue实现全选功能的思路和实现方法。

摘要由CSDN通过智能技术生成

先附上练习源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <link rel="stylesheet" type="text/css" href="../css/demo.css">
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo_table" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                    <th>全选 <input type="checkbox" :checked="allCheckStatus" @click="allCheck()"></th>
                </thead>
                <tbody>