Vue学习-------------（9）v-if和v-else-if和v-else

v-if和v-else的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	  <h2 v-if="isShow">{{message}}</h2>
    	  <h2 v-else="isShow">isShow为false时显示</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',     
            data: {
            	message: '你好啊' ,
            	isShow: true
            }
        })
    </script>
</body>
</html>

　　

v-if和v-if-else和v-else的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	  <p v-if="score>=90">优秀</p>
    	  <p v-if-else="score>=80">良好</p>
    	  <p v-if-else="score>=60">及格</p>
    	  <p v-else>不及格</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',     
            data: {
            	score: 88
            }
        })
    </script>
</body>
</html>

　　

posted @ 2021-03-15 16:39  455994206  阅读(65)  评论(0)    收藏  举报