first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.16/vue测试/page/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="app">
+  <ul>
+      <li v-for="(v,i) in newsList"
+
+      >{{i}} :{{v.title}}</li>
+  </ul>
+    <div class="show"v-show="isShow">展示show</div>
+    <div v-if=" vipLevel==1">VIP1</div><!--如果VIP等级为1显示这个div否则显示下面的div（可以继续判断）-->
+    <div v-else>VIP2</div>
+    <input type="text" placeholder="请输入用户名"v-model="username">
+    {{username}}
+    <button @click="hello(123456)">点击</button>
+</div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 
+<script>
+    new Vue({
+        el:".app",
+        data:{
+            test: '这是vue',
+            url:'https://www.baidu.com/',
+            newsList: [
+                { title: '新闻1',id:1},
+                { title: '新闻2',id:2},
+                { title: '新闻3',id:3},
+                { title: '新闻4',id:4},
+                { title: '新闻5',id:5},
+
+            ],
+            isShow:true,
+            vipLevel:1,
+            username:''
+        },
+        methods:{
+            hello(a){
+                console.log(a)
+                console.log(this.username)
+            }
+        }
+    })
+</script>
+</html>