vue checkbox全选多选获得选中的值代码-html代码-BFW代码库

vue checkbox全选多选获得选中的值代码

代码语言：html

代码描述：vue checkbox全选多选获得选中的值代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
<style>
    body{
        background: white;
    }
</style>


</head>

<body translate="no">



    <div id="app">
        <h4>Order</h4>
        <div>
            total: {{ totalOrderMoney }}
            <table>
                <tr>
                    <th><input type="checkbox" v-model="selectAll"></th>
                    <th align="middle">全选</th>  <th align="left" @click="unselecct">全不选</th>
                </tr>
                <tr v-for="orderItem in billData">
                    <td>
                        <input type="checkbox" v-model="selected" :value="orderItem" number>
                    </td>
                    <td>{{ orderItem.productname }}</td>
                    
                     <td>{{ orderItem.saleprice }}元</td>
                </tr>
            </table>
        </div>
        {{selected}}

        <!--{{ billData }}-->
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

    <script>
        const OrderData = {
            list: [
            {
                productname: '双十一特价杯子',
                saleprice: 11,
            },

                {
                    productname: '双十一特价外套',
                    saleprice: 111,
                },

                {
                    productname: '双十一特价域名',
                    saleprice: 12,
                },
                {
                    productname: '双十一特价空间',
                    saleprice: 1,
                }
            ]};










            new Vue({
                el: '#app',
                data: {
                    se.........完整代码请登录后点击上方下载按钮下载查看