jQuery와 비교하기 위해 Vue.js로 이 카트의 편집 기능을 만들어 봤어요.

17533 단어 Vue.js

위 그림에서 보듯이 다음과 같은 기능을 실현하다
• 장바구니에 있는 책 정보 일람표 표시
/총 금액 표시
• 각 책의 수를 화면에서 편집할 수 있음
· 구성 요소를 통해 [-] 버튼, 수량, [+] 버튼 구현
・ [-] 버튼을 클릭하여 1개 감소
・ [+] 버튼을 클릭하여 수량을 1개 늘립니다.
• 수량 1 이하인 경우 [-] 버튼이 잘못되었습니다.
・ 수량을 변경하는 동시에 총 금액을 갱신합니다.
・ [삭제] 버튼을 클릭하여 이 책을 일람에서 삭제하고 총 금액을 업데이트합니다
· 모든 책의 정보를 일람에서 삭제한 후 화면에'데이터 없음'만 표시
vue01.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カート</title>
    <style type="text/css">
        table {
            border: 2px solid #999999;
            border-collapse: collapse;
            margin: 0 auto;
        }

        th, td {
            padding: 8px 16px;
            border: 1px solid #999999;
        }

        th {
            background-color: #CCCCCC;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak> <!v-cloak: 処理をすべて終えてから画面に表示させる-->
    <br>
    <div v-if="books.length >0">
        <table border="1">
            <thead>
            <tr>
                <th>コード</th>
                <th>名称</th>
                <th>出版社</th>
                <th>定価</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(book,index) in books">
                <td>{{book.code}}</td>
                <td>{{book.name}}</td>
                <td>{{book.publisher}}</td>
                <td>{{book.price | dspPrice}}</td>
                <td>
                    <cpn_count :count="book.count" :index="index" :key="book.code"
                               @count_changed="count_changed"></cpn_count>
                </td>
                <td>
                    <button @click="delBook(index)">削除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div style="text-align:center;"><h3>合計金額：{{totalPrice | dspPrice}}</h3></div>

    </div>
    <div v-else　style="text-align:center;"><h3>データなし</h3></div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 数量編集コンポーネント（子コンポーネント）
    const cpn_count = Vue.extend({
        // `` で囲むことで複数行（ES6）
        template: `
            <div>
                 <button @click="decrease()" :disabled="d_count <=1">-</button>
                    {{ d_count }}
                 <button @click="increase()">+</button>
            </div>`,
        props: {
            count: {
                type: Number,
                default: 0
            },
            index: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                d_count: this.count
            }
        },
        methods: {
            increase() {
                this.d_count++;
                this.emit_count_changed()
            },
            decrease() {
                this.d_count--
                this.emit_count_changed()
            },
            // イベントを発生させる
            emit_count_changed() {
                let info = {
                    index: this.index,
                    count: this.d_count
                }
                this.$emit('count_changed', info)
            }
        },
     })

    // テスト用データを作成
    let books = [
        {
            code: '00009',
            name: 'はじめてのC',
            publisher: '技術評論社',
            price: 2178,
            count: 1
        },
        {
            code: '01002',
            name: 'やさしいC＋＋',
            publisher: 'SOFTBANK',
            price: 2500,
            count: 1
        },
        {
            code: '20006',
            name: '実践SQL',
            publisher: 'SOFTBANK',
            price: 2800,
            count: 1
        }
    ]
    // ルートコンポーネントのインスタンスを生成
    const app = new Vue({
        // Django templateでVue.jsを利用する場合、デリミタを変更する必要がある
        // delimiters: ['[[', ']]'],
        // {{book.code}} -> [[book.code]] など
        el: '#app',
        data: {
            books: books
        },
        methods: {
            count_changed(info) {
                this.books[info.index].count = info.count
            },
            delBook(index) {
                this.books.splice(index, 1)
            }
        },
        filters: {
            // 金額を表示形式に変更
            dspPrice(price) {
                return "￥" + price.toLocaleString();
            },
        },
        computed: {
            // 金額合計計算
            totalPrice() {
                let totalValue = this.books.reduce(function (preval, book) {
                    return preval + book.price * book.count
                }, 0)
                return totalValue
            }
        },
        components: {
            // 数量編集コンポーネントをローカル登録
            'cpn_count': cpn_count
        }
    })
</script>

</body>
</html>
소감:
/구성 요소화, 재사용 시 편리(Vb.net, C#을 만든 사용자 컨트롤과 같은 느낌)
・html 측 값과 JavaScript 처리는 연동 가능("수량 변경과 동시에 합계 금액 갱신"등 처리는 Vue에서 가능)
・ 논리만 기술하면 기능을 실현할 수 있고 가독성이 좋다
Vue에서 스크롤
Vue.js 데이터 배열용 for 순환push도 문제 없어요.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage