Nhấn
CTRL + SPACE
để xem gợi ý code
Xem kết quả
Conditional rendering trong Vue.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue.js Toidicode.com</title> </head> <body style="text-align: center;"> <div id="app"> <h1>Điểm bằng: {{ point }}</h1> <h2> => <span v-if="point < 4"> F</span> <span v-else-if="point >= 4 && point < 5.5"> D</span> <span v-else-if="point >= 5.5 && point < 7"> C</span> <span v-else-if="point >= 7 && point < 8.5"> B</span> <span v-else> A</span> </h2> <button type="button" @click="toggleTag">Toggle Tag</button> </div> <script src="https://unpkg.com/vue@2.4.2" type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { point: 0, }, methods: { toggleTag : function () { if (this.point == 10 ) { this.point = 0; } else { this.point++; } } } }); </script> </body> </html>
