| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <!--
- 条件:
- 1. v-if v-else v-else-if
- 2.v-show
- v-if 与 v-show 区别
- 1.v-if 需要符合逻辑性 消耗性呢 ； v-show 符合就执行 不消耗性能
- -->
- <div id="app">
- <h1>if判断</h1>
- <!-- <input type="text"> -->
- <h3>年龄:{{age}}</h3>
- <p v-if="age < 14">小孩</p>
- <p v-else-if="age> 14 && age <18">青少年</p>
- <p v-else="age > 18">成年</p>
- <hr>
- <h1>show判断</h1>
- <h3>成绩{{score}}</h3>
- <p v-show="score >= 90">优秀</p>
- <p v-show="score >= 75">良好</p>
- <p v-show="score >= 60">及格</p>
- <p v-show="score < 60">不及格</p>
- </div>
- <script src="./vue.js"></script>
- <script>
- var app = new Vue({
- el:"#app",
- data:{
- age: Math.round(Math.random() * 100 - 1 + 1),
- score: Math.round(Math.random() * 100 - 1 + 1),
- }
- })
- </script>
- </body>
- </html>
|
