|
|
@@ -0,0 +1,44 @@
|
|
|
+<!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>
|
e