类样式：
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>
