Live2D

【Vue-入门笔记-2】 

 1 <!DOCTYPE HTML>
 2 <html lang="zh">
 3 <head>
 4         <meta charset="utf-8" />
 5         <title>Vue</title>
 6         <script src="../../vue.js"></script>
 7 </head>
 8 <body>
 9     <!-- --------------------------------------Mr丶L----------------------------------------------- -->
10         <div id="root">
11         <!-- 控制页面元素隐藏显示 -->
12             <!-- v-if   原理：会将对应前端语句注释掉（移除）   效率：少量优先 -->
13             <!-- <div v-if="show">hello world</div> -->
14             <!-- v-show 原理：会修改对应元素的display属性的值  效率：大量优先-->
15             <div v-show="show">hello world</div>
16             <button @click="handleClick">toggel</button>
17         <!-- ul利用v-for循环实现-->
18             <ul>
19                 <!-- 此处 item 是一个变量，将list集合中的每一个下标元素赋值给item达到循环效果-->
20                 <!-- :key 会提升渲染的效率和性能，不允许数值相同 -->
21                 <!-- <li v-for="item of list" :key="index">{{item}}</li> -->
22                 
23                 <!--  表示循环list数据列表，每一项的内容放到item里，每一项的下标放到index里 -->
24                 <!--  此处key值用index，能确保数据唯一，但也不是最好的选择！ -->
25                 <li v-for="(item , index) of list" :key="index">{{item}}</li>
26             </ul>
27         </div>
28     <!-- --------------------------------------Mr丶L----------------------------------------------- -->
29     <script>
30         new Vue({
31             el:"#root",
32             data:{
33                 show:true,
34                 list:[1,2,3,1]
35             },
36             methods:{
37                 handleClick:function(){
38                     this.show= !this.show;
39                 }
40             }
41         })
42     </script>
43 
44 </body>
45 </html>
46 　　

 

posted @ 2020-03-09 15:25  Mr丶L  阅读(115)  评论(0)    收藏  举报