Vue 练习
类样式:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 <style> 9 .active { 10 width: 500px; 11 height: 300px; 12 background-color: aqua; 13 } 14 15 .arrstyle { 16 border-radius: 20px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div id="app"> 23 <div :class="['active arrstyle']"></div> 24 <div :style="{width:'100px',height:'200px',border:'1px solid red'}"></div> 25 </div> 26 <script> 27 var vm = new Vue({ 28 el: "#app", 29 data: { 30 isTrue: true, 31 // styleArr: ["active", "arrstyle"], 32 styleArr: "active arrstyle", 33 }, 34 }); 35 </script> 36 </body> 37 </html>
类样式侧边栏案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 <style> 9 .main { 10 width: 100vw; 11 height: 100vh; 12 background-color: aquamarine; 13 position: fixed; 14 top: 0; 15 left: 0; 16 } 17 18 .menu { 19 width: 50vw; 20 height: 100vh; 21 background-color: blueviolet; 22 position: fixed; 23 top: 0; 24 left: 0; 25 transform: translate(100vw); 26 transition: transform 1s; 27 } 28 .active { 29 transform: translateX(80vw); 30 } 31 </style> 32 </head> 33 34 <body> 35 <div id="app"> 36 <div class="main"> 37 主页 38 <button @click="triggerMenu">调用侧边栏</button> 39 </div> 40 <div class="menu" :class="{active:isShow}">侧边页</div> 41 </div> 42 <script> 43 let vm = new Vue({ 44 el: "#app", 45 data: { 46 isShow: false, 47 }, 48 methods: { 49 triggerMenu: function () { 50 this.isShow = !this.isShow; 51 }, 52 }, 53 }); 54 </script> 55 </body> 56 </html>
事件传参
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <ul> 12 <li v-for="item,index in user" @click="selectEvent(index)"> 13 {{item}}----{{index}} 14 </li> 15 </ul> 16 </div> 17 <script> 18 let vm = new Vue({ 19 el: "#app", 20 data: { 21 user: ["蔡徐坤", "李晨", "杨颖"], 22 }, 23 methods: { 24 selectEvent: function (index) { 25 console.log(index); 26 }, 27 }, 28 }); 29 </script> 30 </body> 31 </html>