-
Notifications
You must be signed in to change notification settings - Fork 0
/
day1.html
187 lines (182 loc) · 32.8 KB
/
day1.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Day1 古早味事件燉畫面綁定 | Yu jax</title>
<meta name="description" content="test">
<link rel="preload" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css" as="style"><link rel="preload" href="/vuepress-notes/assets/js/app.983685f1.js" as="script"><link rel="preload" href="/vuepress-notes/assets/js/5.67d2c5de.js" as="script"><link rel="prefetch" href="/vuepress-notes/assets/js/10.1829f47d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/11.69095bd9.js"><link rel="prefetch" href="/vuepress-notes/assets/js/12.dbbae759.js"><link rel="prefetch" href="/vuepress-notes/assets/js/13.edc40bb1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/14.ec660216.js"><link rel="prefetch" href="/vuepress-notes/assets/js/15.3e2354c4.js"><link rel="prefetch" href="/vuepress-notes/assets/js/16.2c0ae231.js"><link rel="prefetch" href="/vuepress-notes/assets/js/17.083b5622.js"><link rel="prefetch" href="/vuepress-notes/assets/js/18.65c68b6b.js"><link rel="prefetch" href="/vuepress-notes/assets/js/19.16b22c1d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/2.89ad5a90.js"><link rel="prefetch" href="/vuepress-notes/assets/js/20.ed7623b2.js"><link rel="prefetch" href="/vuepress-notes/assets/js/3.4e00d1f1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/4.62b083e6.js"><link rel="prefetch" href="/vuepress-notes/assets/js/6.60261b9f.js"><link rel="prefetch" href="/vuepress-notes/assets/js/7.cf4b2ab5.js"><link rel="prefetch" href="/vuepress-notes/assets/js/8.77fa9358.js"><link rel="prefetch" href="/vuepress-notes/assets/js/9.06f97c9c.js">
<link rel="stylesheet" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-notes/" class="home-link router-link-active"><!----> <span class="site-name">Yu jax</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/vuepress-notes/" class="sidebar-link">內容簡介</a></li><li><a href="/vuepress-notes/menu.html" class="sidebar-link">菜單總覽</a></li><li><a href="/vuepress-notes/day0.html" class="sidebar-link">Day0 起步工具</a></li><li><a href="/vuepress-notes/day1.html" class="active sidebar-link">Day1 古早味事件燉畫面綁定</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vuepress-notes/day2.html" class="sidebar-link">Day2 清爽表單處理佐雙向資料</a></li><li><a href="/vuepress-notes/day3.html" class="sidebar-link">Day3 使用者輸入焗列表呈現</a></li><li><a href="/vuepress-notes/day4.html" class="sidebar-link">Day4 峰峰相連互動式資料表單</a></li><li><a href="/vuepress-notes/day5.html" class="sidebar-link">Day5 天然 CSS 過場佐 jQuery 動畫</a></li><li><a href="/vuepress-notes/day6.html" class="sidebar-link">Day6 異國風情資料觀測與設定</a></li><li><a href="/vuepress-notes/day7.html" class="sidebar-link">Day7 有機發酵生命週期</a></li><li><a href="/vuepress-notes/day8.html" class="sidebar-link">Day8 家鄉通訊錄佐手作</a></li><li><a href="/vuepress-notes/day9.html" class="sidebar-link">Day9 特製雕花 Vue-cli 3.0 與 Node.js 開發環境</a></li><li><a href="/vuepress-notes/day10.html" class="sidebar-link">Day10 科學單檔模組化料理</a></li><li><a href="/vuepress-notes/day11.html" class="sidebar-link">Day11 清燉嫩煮百頁路由</a></li><li><a href="/vuepress-notes/day12.html" class="sidebar-link">Day12 Vuex</a></li><li><a href="/vuepress-notes/day13.html" class="sidebar-link">Day13 漸進式框架</a></li></ul> </div> <div class="page"> <div class="content"><h3 id="day1-古早味事件燉畫面綁定"><a href="#day1-古早味事件燉畫面綁定" aria-hidden="true" class="header-anchor">#</a> Day1 古早味事件燉畫面綁定</h3> <h4 id="內容簡介"><a href="#內容簡介" aria-hidden="true" class="header-anchor">#</a> 內容簡介</h4> <p>將資料放在一快，並且可以利用箭頭切換顯示資料。</p> <h4 id="html-指令"><a href="#html-指令" aria-hidden="true" class="header-anchor">#</a> HTML 指令</h4> <div class="language- extra-class"><pre class="language-text"><code> 原本 縮寫
- v-bind: :
- v-on:click=function() @
- v-if="條件"
</code></pre></div><p>設定資料(data)</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> data <span class="token operator">=</span><span class="token punctuation">{</span> <span class="token comment">//資料如果很多 利用變數來儲存</span>
<span class="token punctuation">.</span>
<span class="token punctuation">.</span>
<span class="token punctuation">.</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> vm<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
el<span class="token punctuation">:</span><span class="token string">"#app"</span><span class="token punctuation">,</span> <span class="token comment">//綁定區域</span>
data<span class="token punctuation">:</span>data <span class="token comment">//綁定資料</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>設定方法(methods)</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">changeIndex</span><span class="token punctuation">(</span>change<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> length <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>menu<span class="token punctuation">.</span>length
<span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">+</span> change <span class="token operator">+</span> length<span class="token punctuation">)</span> <span class="token operator">%</span> length
<span class="token punctuation">}</span>
</code></pre></div><h4 id="重點整理"><a href="#重點整理" aria-hidden="true" class="header-anchor">#</a> 重點整理</h4> <ul><li>資料綁定</li> <li>設定方法</li></ul> <h4 id="code"><a href="#code" aria-hidden="true" class="header-anchor">#</a> Code</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ie=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>古早味事件燉畫面綁定<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span>
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
<span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css<span class="token punctuation">"</span></span>
<span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB<span class="token punctuation">"</span></span>
<span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">*</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0%<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">img</span> <span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.badge</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.menuItem</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>src<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge-warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 如果不是第一天就秀出來 --></span>
<span class="token comment"><!-- index!=0- --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>arrow_left btn btn-primary<span class="token punctuation">"</span></span>
<span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>changeIndex(-1) <span class="token punctuation">"</span></span>
<span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index != 0<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menuItem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number badge badge-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ index + 1 }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Type badge badge-light<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>{{ this.menu[this.index].type }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span>
<span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>this.menu[this.index].link<span class="token punctuation">"</span></span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title badge badge-dark<span class="token punctuation">"</span></span>
<span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vue-iron<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>{{ this.menu[this.index].title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 如果不是最後一天就秀出來 --></span>
<span class="token comment"><!-- index!=6 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>arrow_right btn btn-primary<span class="token punctuation">"</span></span>
<span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>changeIndex(1)<span class="token punctuation">"</span></span>
<span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index != this.menu.length -1<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'古早味事件燉畫面綁定'</span><span class="token punctuation">,</span>
src<span class="token punctuation">:</span> <span class="token string">'/04 古早味事件燉畫面綁定/img/vue-newsletter.png'</span><span class="token punctuation">,</span>
index<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
menu<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-1'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-2'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-3'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-4'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-5'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-6'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'1-7'</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> <span class="token string">'javascript:;'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token function">changeIndex</span><span class="token punctuation">(</span>change<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> length <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>menu<span class="token punctuation">.</span>length
<span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">+</span> change <span class="token operator">+</span> length<span class="token punctuation">)</span> <span class="token operator">%</span> length
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><img src="https://i.imgur.com/7rEORlC.png"> <hr> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/VW4RZSKqIEE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/68ItsYcqjHI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></center></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vuepress-notes/day0.html" class="prev">
Day0 起步工具
</a></span> <span class="next"><a href="/vuepress-notes/day2.html">
Day2 清爽表單處理佐雙向資料
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vuepress-notes/assets/js/app.983685f1.js" defer></script><script src="/vuepress-notes/assets/js/5.67d2c5de.js" defer></script>
</body>
</html>