v-if 和 v-else-if 和 v-else 的使用
生活随笔
收集整理的這篇文章主要介紹了
v-if 和 v-else-if 和 v-else 的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><h2 v-if="score>=90">優(yōu)秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2><h1>{{result}}</h1>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {score: 99},computed: {result() {let showMessage = '';if (this.score >= 90) {showMessage = '優(yōu)秀'} else if (this.score >= 80) {showMessage = '良好'}// ...return showMessage}}})
</script></body>
</html>
?
總結
以上是生活随笔為你收集整理的v-if 和 v-else-if 和 v-else 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 事件监听 || v-on参数
- 下一篇： v-show 与 v-if 的区别