Created
September 29, 2018 23:07
-
-
Save takaheraw/4da168dee757140c2e635785877ca845 to your computer and use it in GitHub Desktop.
vue.jsの基本
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var items = [ | |
| { | |
| name: '鉛筆', | |
| price: 300, | |
| quantity: 0 | |
| }, | |
| { | |
| name: 'ノート', | |
| price: 400, | |
| quantity: 0 | |
| }, | |
| { | |
| name: '消しゴム', | |
| price: 500, | |
| quantity: 0 | |
| } | |
| ] | |
| var vm = new Vue({ | |
| el: '#app', | |
| data: { | |
| items: items | |
| }, | |
| filters: { | |
| numberWithDelimiter: function(value) { | |
| if(!value) { | |
| return '0' | |
| } | |
| return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,') | |
| } | |
| }, | |
| methods: { | |
| doBuy: function() { | |
| alert(this.totalPriceWithTax + '円のお買い上げ!') | |
| this.items.forEach(function (item) { | |
| item.quantity = 0 | |
| }) | |
| } | |
| }, | |
| computed: { | |
| totalPrice: function() { | |
| return this.items.reduce(function (sum, item) { | |
| return sum + (item.price * item.quantity) | |
| }, 0) | |
| }, | |
| totalPriceWithTax: function() { | |
| return Math.floor(this.totalPrice * 1.08) | |
| }, | |
| canBuy: function() { | |
| return this.totalPrice >= 1000 | |
| }, | |
| errorMessageStyle: function() { | |
| return { | |
| border: this.canBuy ? '' : '1px solid red', | |
| color: this.canBuy ? '' : 'red' | |
| } | |
| } | |
| } | |
| }); | |
| window.vm = vm; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Page Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <ul> | |
| <li v-for="item in items" v-bind:key="item.name"> | |
| {{ item.name }}の個数: <input type="number" v-model="item.quantity" min="0"> | |
| </li> | |
| </ul> | |
| <div v-bind:style="errorMessageStyle"> | |
| <ul> | |
| <li v-for="item in items" v-bind:key="item.name"> | |
| {{ item.name }}: {{ item.price }} * {{ item.quantity }} = {{ item.price * item.quantity | numberWithDelimiter }}円 | |
| </li> | |
| </ul> | |
| <p>{{ items[0].name }}: {{ items[0].price }} * {{ items[0].quantity }}</p> | |
| <p>小計: {{ totalPrice | numberWithDelimiter }}円</p> | |
| <p>合計: {{ totalPriceWithTax | numberWithDelimiter }}円</p> | |
| <p v-show="!canBuy">{{ 1000 | numberWithDelimiter }}円以上から購入いただけます</p> | |
| <button v-bind:disabled="!canBuy" v-on:click="doBuy">購入</button> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment