Home Explore Help
Sign In
lovecoding
/
VIP32
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

vue

e 1 year ago
parent
0f4d5b1a36
commit
67ff584671
2 changed files with 84 additions and 0 deletions
Unified View Show Diff Stats
  1. 49 0
      vue2.0/vue初阶/7.样式绑定1.0.html
  2. 35 0
      vue2.0/vue初阶/8.样式绑定2.0.html

+ 49 - 0
vue2.0/vue初阶/7.样式绑定1.0.html
View File 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .active {
 
+            color: #f00;
 
+        }
 
+        .bold {
 
+            font-weight: bold;
 
+        }
 
+        .size {
 
+            font-size: 30px;
 
+        }
 
+        .color {
 
+            color: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        样式绑定：
 
+            内置指令：v-bind 简写=> :
 
+            class / style
 
+            格式： v-bind:class='样式' / :class="样式"
 
+            
+     -->
 
+    <div id="app">
 
+        <!-- 对象 -->
 
+        <div :class="{active:isActive}">内容2</div>
 
+        <div v-bind:class="{active:isActive,size:true}">内容1</div>
 
+        <!-- 数组 class样式不是覆盖 是合并 -->
 
+        <div :class="['active','bold','size']">你真棒</div>
 
+        <!-- 对象 + 数组 -->
 
+        <div :class="[{color:true},'bold']">混合写法</div>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                isActive: true
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 35 - 0
vue2.0/vue初阶/8.样式绑定2.0.html
View File 

@@ -0,0 +1,35 @@
 
+<!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>
 
+    <!-- 
+        内置指令：
 
+            样式绑定：style 
+            格式:
 
+                v-bind:style="样式"
 
+                :style="样式"
 
+     -->
 
+    <div id="app">
 
+        <!-- 对象 -->
 
+        <p v-bind:style="{color:isColor,fontSize:size+'px'}">{{message}}</p>
 
+        <!-- 数组 -->
 
+        <p :style="[{color:isColor}]">标题</p>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            // el:"#app"
 
+            data:{
 
+                message:"hello_world",
 
+                isColor: 'red',
 
+                size: 30,
 
+            }
 
+        })
 
+        app.$mount("#app")
 
+    </script>
 
+</body>
 
+</html>