<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>unit price changing</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-html="message"></div> <button @click="count--">-</button>{{count}}<button @click="count++">+</button> Total Price is: {{total}} </div> <script> new Vue({ el: '#app', data: { message: '<h1>unit price changing</h1>', count:3 }, computed:{ total(){ let price = 0; let count = this.count; if(count<2&&count>=0){ price =3 } else if(count<5){ price =2 } else if(count<=10){ price =1 } else{ price =0.5 } return price*count } } }) </script> </body> </html>
