脚本宝典收集整理的这篇文章主要介绍了

Slog14_支配vue框架模版语法之v-if

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <ul> <li>ArthurSlog</li> <li>SLog-14</li> <li>Year·1</li> <li>Guangzhou·China</li> <li>July 18th 2018</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="/img/remote/1460000016043562?w=128&amp;h=130" alt="关注微信公众号“ArthurSlog”" title="关注微信公众号“ArthurSlog”" style="cursor: pointer; display: inline;"></span></p> <ul> <li><a href="https://github.com/BlessedChild/ArthurSlog" rel="nofollow noreferrer" target="_blank">GitHub</a></li> <li><a href="https://juejin.im/user/59f2a424f265da432f305c66/posts" rel="nofollow noreferrer" target="_blank">掘金主页</a></li> <li><a href="https://www.jianshu.com/u/b9ebe10f0534" rel="nofollow noreferrer" target="_blank">简书主页</a></li> <li><a href="https://segmentfault.com/u/arthurslog/articles">segmentfault</a></li> </ul> <p>有一只火鸡,他想,这主人天天给我喂吃的,对我也挺不错,要按照这个逻辑,我觉得过不了多久,我就能取代他家狗,成为他最心爱的宠物, 结果一个月后感恩节直接就上餐桌了</p> <hr> <h3 id="articleHeader0">开发环境MacOS(High Sierra 10.13.5)</h3> <h4>需要的信息和信息源:</h4> <ul> <li>本文的所有<a href="https://github.com/BlessedChild/node_vue_directive_learningload" rel="nofollow noreferrer" target="_blank">源码地址</a> </li> <li>vue.js 的<a href="https://vuejs.org/v2/api/index.html#v-text" rel="nofollow noreferrer" target="_blank">模版指令(directive)</a>,当前(2018/7/17)一共有 13 个,分别是:</li> </ul> <ol> <li>v-text</li> <li>v-html</li> <li>v-show</li> <li>v-if</li> <li>v-else</li> <li>v-else-if</li> <li>v-for</li> <li>v-on</li> <li>v-bind</li> <li>v-model</li> <li>v-pre</li> <li>v-cload</li> <li>v-once</li> </ol> <ul> <li>vue.js 的模版指令,与编程语言的 “关键字” 或者 “保留字” 有点相似,例如 if(判断语句关键字)、for(循环语句关键字)</li> </ul> <h3 id="articleHeader1">开始编码</h3> <ul> <li>首先,搭起静态服务器,先切换至桌面路径</li> </ul> <blockquote><p>cd ~/Desktop</p></blockquote> <ul> <li>创建一个文件夹<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_vue_directive_learningload</li> </ul> <blockquote><p>mkdir <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_vue_directive_learningload</p></blockquote> <ul> <li>切换路径到新建的文件夹下</li> </ul> <blockquote><p>cd node_vue_directive_learningload</p></blockquote> <ul> <li>使用npm初始化node环境,一路enter键完成初始化</li> </ul> <blockquote><p>npm init</p></blockquote> <ul> <li>使用npm安装koa和koa-static</li> </ul> <blockquote><p>sudo npm install koa koa-static</p></blockquote> <ul> <li>参考<a href="https://github.com/koajs/static" rel="nofollow noreferrer" target="_blank">Koa-static说明手册</a>,我们在当前路径下编写index.js和index.html两份文件</li> </ul> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const serve = require('koa-static'); const Koa = require('koa'); const app = new Koa(); // $ GET /package.json app.use(serve('.')); app.listen(3000); console.log('listening on port 3000');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> serve = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa-static'</span>); <span class="hljs-keyword">const</span> Koa = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa'</span>); <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Koa(); <span class="hljs-comment">// $ GET /package.json</span> app.use(serve(<span class="hljs-string">'.'</span>)); app.listen(<span class="hljs-number">3000</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'listening on port 3000'</span>);</code></pre> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html></p> <p><head><br /> <meta charset=&quot;utf-8&quot;><br /> <title>ArthurSlog</title><br /> </head></p> <p><body></p> <h1>The static web server by ArthurSlog</h1> <p></body></p> <p></html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>The static web server by ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <ul> <li>接下来,我们来根据使用场景,来编写 vue.js 模版指令代码</li> </ul> <p>v-if.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <!-- 开发环境版本,包含了有帮助的命令行警告 --><br /> <script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;></script><br /> <title>ArthurSlog</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <h1 v-if=&quot;state1 === state2&quot;>Hello ArthurSlog, &quot;state1&quot; === &quot;state2&quot;</h1> <h1 v-if=&quot;state2 !== state2&quot;>Hello ArthurSlog, &quot;state1&quot; !== &quot;state2&quot;</h1> </p></div> <p> <script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { state1: 'ok', state2: 'ok' } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 开发环境版本,包含了有帮助的命令行警告 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"state1 === state2"</span>&gt;</span>Hello ArthurSlog, "state1" === "state2"<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"state2 !== state2"</span>&gt;</span>Hello ArthurSlog, "state1" !== "state2"<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app'</span>, data: { state1: <span class="hljs-string">'ok'</span>, state2: <span class="hljs-string">'ok'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <ul> <li>现在你可以打开浏览器,在地址栏输入 127.0.0.1:3000/v-if.html,你会看到:Hello ArthurSlog, "state1" === "state2",因为此时 state1 的值与 state2 的值相等,判断为 true,所以会显示出第一条字符串</li> <li>至此,我们把 vue模版指令 v-if 介绍了一遍,更多使用方法和信息,请参考 <a href="https://vuejs.org/v2/api/index.html#v-text" rel="nofollow noreferrer" target="_blank">vue官方手册</a>。</li> </ul> <hr> <h3 id="articleHeader2">欢迎关注我的微信公众号 ArthurSlog</h3> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="ArthurSlog" title="ArthurSlog" style="cursor: pointer;"></span></p> <h3 id="articleHeader3">如果你喜欢我的文章 欢迎点赞 留言</h3> <h3 id="articleHeader4">谢谢</h3> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Slog14_支配vue框架模版语法之v-if

全部内容,希望文章能够帮你解决

Slog14_支配vue框架模版语法之v-if

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过