-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path19087.html
256 lines (247 loc) · 55.9 KB
/
19087.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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue（二） | 征蓬</title><meta name="keywords" content="Vue"><meta name="author" content="huy"><meta name="copyright" content="huy"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Vue 模板语法。">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue（二）">
<meta property="og:url" content="http://example.com/19087.html">
<meta property="og:site_name" content="征蓬">
<meta property="og:description" content="Vue 模板语法。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/pics/scenery/30.jpg">
<meta property="article:published_time" content="2021-05-10T02:37:13.000Z">
<meta property="article:modified_time" content="2022-04-18T09:28:30.182Z">
<meta property="article:author" content="huy">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/pics/scenery/30.jpg"><link rel="shortcut icon" href="/pics/avatar/8.png"><link rel="canonical" href="http://example.com/19087"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/font/wcsf.ttf" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
source: {
jQuery: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'Vue（二）',
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2022-04-18 17:28:30'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><script async src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.1"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/pics/Asoul/8.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">54</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">17</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">12</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/pics/scenery/30.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">征蓬</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue（二）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-05-10T02:37:13.000Z" title="发表于 2021-05-10 10:37:13">2021-05-10</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-04-18T09:28:30.182Z" title="更新于 2022-04-18 17:28:30">2022-04-18</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue/">Vue</a></span></div><div class="meta-secondline"></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="目录结构">目录结构</h2>
<p><img src="https://raw.githubusercontent.com/LazyLutra/imgBed/main/%E6%9C%AA%E5%91%BD%E5%90%8D%E7%BB%98%E5%9B%BE.png" alt="Vue ClI 目录结构"></p>
<h2 id="模板语法">模板语法</h2>
<h2 id="文本">文本</h2>
<p>数据绑定的最常见形式，使用 Mustache（双大括号）的文本插值：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span></span><br><span class="line"> Vue 测试</span><br><span class="line"> <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> {{ message }}</span><br><span class="line"> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>: <span class="string">'Hello'</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>p标签中的值会被替代为对应数据对象的实例属性值，如果实例的属性发生改变，插值的内容都会发生更新。</p>
<p>使用 v-once 指令，插值的内容将不会改变，始终为第一次的数据。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">v-once</span>></span>{{ message }}<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="HTML">HTML</h2>
<p>使用双大括号包裹起来的数据会被解析为文本，如果需要输出 HTML 代码，需要使用 <code>v-html</code> 指令：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span></span><br><span class="line"> Vue 测试</span><br><span class="line"> <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"message"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>: <span class="string">'<h1>Hello</h1>'</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>需要注意的是，该方法容易导致 XSS 攻击。只对可信赖的内容使用 HTML 插值，不能对用户提供的内容使用插值。</strong></p>
<h2 id="属性-3">属性</h2>
<p>Mustache 语法不能作用在 HTML 的属性上，如果要控制属性，则需要使用 <code>v-bind</code> 指令：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span></span><br><span class="line"> Vue 测试</span><br><span class="line"> <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-class">.class1</span>{ <span class="attribute">background</span>: <span class="number">#444</span>; <span class="attribute">color</span>: <span class="number">#eee</span>; }</span></span><br><span class="line"><span class="css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"r1"</span>></span></span><br><span class="line"> 修改颜色</span><br><span class="line"> <span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">v-model</span>=<span class="string">"use"</span> <span class="attr">id</span>=<span class="string">"r1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"{'class1': use}"</span>></span></span><br><span class="line"> v-bind:class 指令</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">use</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> });</span></span><br><span class="line"><span class="javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<p>如果是布尔类型的属性，使用方法不同（只要存在，属性的值就为true）：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">v-bind:disabled</span> = <span class="string">"isButtonDisabled"</span> ></span>Buttoon<span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure>
<p>如果 isButtonDisabled 的值为：null、undefined、false，则该按钮不会显示，且属性也不会出现在渲染出的 <code><button></code> 元素中。</p>
<p>更多 <code>v-bind</code> 指令内容参考官方文档 <a href="#refer-anchor-1"><sup>1</sup></a>。</p>
<h2 id="JavaScript表达式">JavaScript表达式</h2>
<p>JS 表达式会在 Vue 实例的数据作用域下被解析：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span></span><br><span class="line"> Vue 测试</span><br><span class="line"> <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.staticfile.org/vue/2.2.2/vue.min.js"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> {{5+5}}</span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> {{ ok ? 'YES' : 'NO' }}</span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> {{ message.split('').reverse().join('') }}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"'list-' + id"</span>></span></span><br><span class="line"> 菜鸟教程</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">ok</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>: <span class="string">'123'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">id</span>: <span class="number">1</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<article class="message is-danger"><div class="message-header">
<p>每个双大括号只能包含单个表达式。</p>
</div><div class="message-body">
<p>这是语句，不是表达式 : { { var a = 1 } } <br><br><br>
不能使用 if 流程控制，可以使用三元运算 : { { if (ok) { return message } } }</p>
</div></article>
<h2 id="指令">指令</h2>
<p>指令是带有 v- 前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到 DOM 上，具体可以参考官方 API 文档 <a href="#refer-anchor-2"><sup>2</sup></a>。</p>
<p>指令属性的值，预期是单个 JavaScript 表达式（v-for 是例外情况）。</p>
<p>例如，修改 Vue 实例的 flag 属性，可以插入、移除 <code><p></p></code> 元素：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span> = <span class="string">"flag"</span>></span>show<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">flag</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h2 id="参数">参数</h2>
<p>一些指令可以接受一个参数，在指令后使用冒号表示。</p>
<p>例如：</p>
<p>将 url 作为参数传入 <code><a></a></code> 元素。</p>
<p>这里的 href 是参数，告诉 <code>v-bind</code> 指令，将该元素的 href 属性和 Vue 实例中的 url 属性绑定。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">v-bind:href</span> = <span class="string">"url"</span>></span>网页链接<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> url = <span class="string">'https://www.baidu.com/'</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h2 id="修饰符">修饰符</h2>
<p>修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。</p>
<p>例如：</p>
<p>.prevent 修饰符告诉 <code>v-on</code> 指令，对触发的事件调用 event.preventDefault() :</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">v-on:submit.prevent</span>=<span class="string">"onSubmit"</span>></span>...<span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="缩写">缩写</h2>
<p>Vue 为常用的 <code>v-bind</code> 和 <code>v-on</code> 指令提供了缩写：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- v-bind 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- v-bind 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- v-on 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- v-on 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="条件语句">条件语句</h2>
<p><strong>v-for 具有比 v-if 更高的优先级，应避免 v-if 和 v-for 用在一起 <a href="#refer-anchor-3"><sup>3</sup></a>。</strong></p>
<h2 id="v-if">v-if</h2>
<p>条件判断使用 <code>v-if</code> 指令：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span> = <span class="string">"showFlag"</span>></span>展示内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">showFlag</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h3 id="3-1-1-v-else">3.1.1 v-else</h3>
<p>可以使用 <code>v-else</code> 表示 else 语句，必须要跟在 <code>v-if</code> 后面，否则不会识别。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span> = <span class="string">"Math.random() > 0.5"</span>></span> > 0.5 <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else</span>></span> < 0.5 <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="3-1-2-v-else-if">3.1.2 v-else-if</h3>
<p>在 <strong>2.1.0</strong> 版本中新增，用作 <code>v-if</code> 的 <code>v-else-if</code> 语句，可以连续使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"type === 'A'"</span>></span></span><br><span class="line"> A</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">"type === 'B'"</span>></span></span><br><span class="line"> B</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">"type === 'C'"</span>></span></span><br><span class="line"> C</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-else</span>></span></span><br><span class="line"> Not A/B/C</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'C'</span></span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h3 id="3-1-3-template-元素中使用-v-if">3.1.3 <code><template></code> 元素中使用 v-if</h3>
<p>因为 <code>v-if</code> 指令必须用在一个元素上，如果需要切换多个元素，就需要使用 <code><template></code> 元素。</p>
<p>将 <code><template></code> 元素视为一个不可见的包裹元素，并使用 <code>v-if</code> 指令，最终渲染结果不包含该元素。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"seen"</span>></span>shou<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">v-if</span>=<span class="string">"ok"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>template 元素下的 h1标签<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>template 元素下的 p标签<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">seen</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">ok</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h2 id="v-show">v-show</h2>
<p>用法和 <code>v-if</code> 类似，但是带有该指令的元素会保留在 DOM 中。只是切换元素的 CSS property display。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">v-show</span> = <span class="string">"ok"</span>></span> p标签 <span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>v-show 指令不支持 template 和 v-if。</strong></p>
<h2 id="v-if-和-v-show">v-if 和 v-show</h2>
<ul>
<li>
<p>v-if</p>
<ul>
<li>
<p>是惰性的。如果初始条件为 false，则什么都不做；直到条件第一次变为 true 时，开始渲染。</p>
</li>
<li>
<p>“真正”的条件渲染。它会确保切换过程中，条件块内的事件监听器和子组件适当地销毁和重建。</p>
</li>
</ul>
</li>
<li>
<p>v-show</p>
<ul>
<li>不论初始条件是什么，始终会渲染元素，只根据条件切换 CSS 属性。</li>
</ul>
</li>
</ul>
<p>一般来说，<code>v-if</code> <strong>切换开销高</strong>，<code>v-show</code> <strong>初始渲染开销高</strong>。开发时可以根据情况选用。</p>
<h2 id="参考-13">参考</h2>
<div id="refer-anchor-1"></div>
<ul>
<li>[1] <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/api/#v-bind">API —— v-bind</a></li>
</ul>
<div id="refer-anchor-2"></div>
<ul>
<li>[2] <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4">API —— 指令</a></li>
</ul>
<div id="refer-anchor-3"></div>
<ul>
<li>[3] <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81">避免 v-if 和 v-for 用在一起</a></li>
</ul>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">huy</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/19087.html">http://example.com/19087.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">征蓬</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="/pics/scenery/30.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://jsdelivr.pai233.top/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://jsdelivr.pai233.top/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/56053.html" title="Vue（一）"><img class="cover" src="/pics/scenery/12.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-05-06</div><div class="title">Vue（一）</div></div></a></div><div><a href="/24572.html" title="Vue（三）前后端分离项目搭建"><img class="cover" src="/pics/scenery/14.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-04-18</div><div class="title">Vue（三）前后端分离项目搭建</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="toc-number">1.</span> <span class="toc-text">目录结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">模板语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC"><span class="toc-number">3.</span> <span class="toc-text">文本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML"><span class="toc-number">4.</span> <span class="toc-text">HTML</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7-3"><span class="toc-number">5.</span> <span class="toc-text">属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">6.</span> <span class="toc-text">JavaScript表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%87%E4%BB%A4"><span class="toc-number">7.</span> <span class="toc-text">指令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E6%95%B0"><span class="toc-number">8.</span> <span class="toc-text">参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">9.</span> <span class="toc-text">修饰符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%A9%E5%86%99"><span class="toc-number">10.</span> <span class="toc-text">缩写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5"><span class="toc-number">11.</span> <span class="toc-text">条件语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-if"><span class="toc-number">12.</span> <span class="toc-text">v-if</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-1-v-else"><span class="toc-number">12.1.</span> <span class="toc-text">3.1.1 v-else</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-2-v-else-if"><span class="toc-number">12.2.</span> <span class="toc-text">3.1.2 v-else-if</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-3-template-%E5%85%83%E7%B4%A0%E4%B8%AD%E4%BD%BF%E7%94%A8-v-if"><span class="toc-number">12.3.</span> <span class="toc-text">3.1.3 <template> 元素中使用 v-if</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-show"><span class="toc-number">13.</span> <span class="toc-text">v-show</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-if-%E5%92%8C-v-show"><span class="toc-number">14.</span> <span class="toc-text">v-if 和 v-show</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83-13"><span class="toc-number">15.</span> <span class="toc-text">参考</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background-image: url('/pics/scenery/30.jpg')"><div id="footer-wrap"><div class="copyright">©2021 - 2022 By huy</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://jsdelivr.pai233.top/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script id="click-heart" src="https://jsdelivr.pai233.top/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script></div><!-- hexo injector body_end start --><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>