-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclassAndStyleBindings.html
206 lines (199 loc) · 8.69 KB
/
classAndStyleBindings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Class and Style Bindings</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/obsidian.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style media="screen">
.red-text {
color: red;
}
.bold-text {
font-weight: bold;
}
.active::after {
content: ' ←active';
color: blue;
}
</style>
</head>
<body>
<h1>Class and Style Bindings</h1>
<h2>Binding HTML Classes</h2>
<p>前面有介紹「賦值attribute」可以用<code>v-bind:attr</code>的語法這樣寫，寫一個vue.data在裡面。</p>
<b>HTML</b>
<pre><code class="html">< div v-bind:class="isActive">{{text}}< /div ></code></pre>
<b>Javascript</b>
<pre><code class="javascript">var vbind_assign = new Vue({
data: {
text: 'active!!!',
isActive: 'active'
}
})</code></pre>
<b>Result</b>
<div id="vbind-assign">
<div v-bind:class="isActive">{{text}}</div>
</div>
<p class="tip">同理class也可以，而class最常用的就是「換class」。<br />可以用<code>v-bind:class</code>的語法，在後面接一個「在vue.data裡面宣告一個js的物件」名稱。</p>
<b>HTML</b>
<pre><code class="html">< div v-bind:class = "{ active: isActive }" > </ div ></code></pre>
<b>Javascript</b>
<pre><code class="javascript">var vbind_condition = new Vue({
data: {
text: 'vbind-condition!!!',
isActive: true
}
})</code></pre>
<p>
意思是<br />
<code>if (vbind_condition.data.isActive === true)</code>
</p>
<pre><code class="html">< div class="active">
vbind-condition!!!
::after
< /div ></code></pre>
<p><code>else</code></p>
<pre><code class="html">< div class="">
vbind-condition!!!
< /div ></code></pre>
<b>Result</b>
<div id="vbind-condition">
<div v-bind:class="{active:isActive}">{{text}}</div >
</div>
<p>如果要「條件控制」很多個class的套用情形，可以使用下面的方法</p>
<h3>Object (of javascript) Syntax</h3>
<p>如果<code>v-bind:class</code>後面接著的物件很複雜，就可以將這一個js物件，命名並寫在<code>data</code>裡，並且在<code>v-bind:class</code>接上這個js物件的名字</p>
<pre><code class="html">< div v-bind:class="classGroup">qwer< /div ></code></pre>
<p>在<code>data</code>直接建「資料物件」(<code>dataObject</code>)，用來切換<code>red</code></p>
<pre><code class="javascript">data: {
classGroup: {
'red-text': true,
'bold-text': false,
active: false
}
}</code></pre> 渲染完成為這樣
<pre><code class="html">< div class="red-text active">qwer< /div ></code></pre>
<b>Result</b>
<div id="vbind-object">
<div v-bind:class="classGroup">qwer</div>
</div>
<h3>Array (of javascript) Syntax</h3>
<p class="tip">除了寫物件在<code>v-bind:class</code>後面，還可以寫<code>array</code>，代表<code>data</code>有其屬性時，就有<code>class</code></p>
<b>HTML</b>
<pre><code class="html">< div v-bind:class="[arrayElement]">< /div ></code></pre>
<b>Javascript</b>
<pre><code class="javascript">data: {
arrayElement: 'cssClass'
}</code></pre>
<p><b>HTML</b>渲染後，變成這樣</p>
<pre><code class="html">< div class="cssClass">< /div ></code></pre>
<b>Result</b>
<div id="vbind-array">
<div v-bind:class="[red_blod]">bold & red text</div>
</div>
<h3>Array加判斷式</h3>
<p>如果不只是要依「<code>Modal</code>是否有屬性」判斷</p>
<p>想要依「其屬性的內容」判斷，就在array裡用「三元運算」<code>property?cssClass1:cssClass2</code></p>
<pre><code class="html">< div v-bind:class="[arrayElement ? cssClass1 : cssClass2]">< /div ></code></pre>
<p>如果太複雜，可以再將array裡的成員變成物件</p>
<pre><code class="html">< div v-bind:class="[{ active: isActive }, errorClass]">< /div ></code></pre>
<h3>With Components</h3> 有一個組件長這樣
<b>Javascript</b>
<pre><code class="javascript">Vue.component('my-component', {
template: '< p class="foo bar">Hi< /p >'
})
var empty_component = new Vue ({
el: '#empty-component'
})</code></pre>
<b>HTML</b>
<pre><code class="html">< my-component id="empty-component" class="baz boo">< /my-component ></code></pre>
<p>渲染完的結果是這樣，兩邊的class取聯集</p>
<pre><code class="html">< p id="empty-component" class="foo bar baz boo">Hi< /p ></code></pre>
<b>Result</b>
<my-component id="empty-component" class="baz boo"></my-component>
<h3><code>component</code>條件渲染class</h3>
<p>其中，它的class也可以依照上述方式處理</p>
<pre><code class="html">< my-component v-bind:class="{ active: isActive }">< /my-component ></code></pre> 就可以依isActive的內容值決定是否套件此class。
<pre><code class="html">< p class="foo bar active">Hi< /p ></code></pre>
<h2>Binding Inline Styles</h2>
<p class="tip">這是一種像極CSS原生寫法的「控制vue css」的寫法</p>
<p><code>v-bind</code>的用法，用在<code>style</code>上。</p>
<pre><code class="html">< div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">< /div ></code></pre> 然後，在
<code>Vue</code>的<code>data</code>這樣寫
<pre><code class="javascript">data: {
activeColor: 'red',
fontSize: 30
}</code></pre>
<p>像不像<code>css</code>的<code>inline寫法</code></p>
<pre><code class="html">< div style="color: red;fontSize: 30px;">< /div ></code></pre>
<p class="tip">很像直接寫CSS的感覺吧!!!(官網直接這麼說「it looks almost like CSS」)。<br />
另外還可以將這種寫法變成「資料物件」的寫法</p>
<pre><code class="html">< div v-bind:style="styleObject">< /div ></code></pre>
<pre><code class="javascript">data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}</code></pre>
<p>像不像<code>css</code>的<code>一般寫法</code></p>
<b>HTML</b>
<pre><code class="html">< div class="title-style">< /div ></code></pre>
<b>CSS</b>
<pre><code class="css">.title-style {
color: 'red';
fontSize: '13px';
}</code></pre>
<b>也可以用兩個</b>
<pre><code class="html">< div v-bind:style="[obj1, obj2]">< /div ></code></pre>
<h3>自動補上 vendor prefix</h3>
<p>而且!!!在需要時會「自動加上 Vendor Prefix」</p>
<h3>自動選擇支援的前綴</h3>
<pre><code class="html">< div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></code></pre> 若支援無前綴的情況，就會自動變成
<pre><code class="html">< div style="{ display: flex }"></code></pre>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vbind_assign = new Vue({
el: '#vbind-assign',
data: {
text: 'active!!!',
isActive: 'active red-text'
}
})
var vbind_condition = new Vue({
el: '#vbind-condition',
data: {
text: 'vbind-condition!!!',
isActive: true
}
})
var vbind_object = new Vue({
el: '#vbind-object',
data: {
classGroup: {
'red-text': true,
'bold-text': false,
active: true
}
}
})
var vbind_array = new Vue ({
el: '#vbind-array',
data: {
red_blod: 'red-text bold-text'
}
})
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var empty_component = new Vue ({
el: '#empty-component'
})
</script>
</body>
</html>