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

Vue 2.0 入门系列(2)列表

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>假如有一个姓名<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>:</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="names: [&quot;jack&quot;,&quot;rose&quot;,&quot;kaka&quot;,&quot;curry&quot;]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">names: [<span class="hljs-string">"jack"</span>,<span class="hljs-string">"rose"</span>,<span class="hljs-string">"kaka"</span>,<span class="hljs-string">"curry"</span>]</code></pre> <p>在 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 中如何显示和添加元素呢?</p> <h2 id="articleHeader0">v-for</h2> <p><code>{{ }}</code> 和 <code>v-text</code> 如果用来输出<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>,会直接显示整个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>。因此,我们需要 <code>v-for</code> 来显示数组:</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="// html <div id=&quot;root&quot;> <ul> <li v-for = &quot;name in names&quot;> {{ name }}</li> </ul> </div> <p>// js<br /> let data = {<br /> names: [&quot;jack&quot;,&quot;rose&quot;,&quot;kaka&quot;,&quot;curry&quot;]<br /> };</p> <p>var vm = new Vue({<br /> el: '#root',<br /> data:data<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// html</span> &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"root"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span> = <span class="hljs-string">"name in names"</span>&gt;</span> {{ name }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; /</span><span class="hljs-regexp">/ js <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> data = { names: ["jack","rose","kaka","curry"] }; var vm = new <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: '#root', data:data })</span></code></pre> <p>现在,我们考虑为数组添加元素,效果如下</p> <p><span class="img-wrap"><img data-src="/img/bVMMch?w=419&amp;h=362" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>功能很简单:添加姓名,然后清空输入框</p> <h2 id="articleHeader1">用 js 添加姓名</h2> <p>首先,考虑用 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=" <div id=&quot;root&quot;> <ul> <li v-for = &quot;name in names&quot;> {{ name }}</li> </ul> <p> <input type=&quot;text&quot; id=&quot;addName&quot;><br /> <button id=&quot;submit&quot;>添加姓名</button> </div> <p>// js<br /> let data = {<br /> names: [&quot;jack&quot;,&quot;rose&quot;,&quot;kaka&quot;,&quot;curry&quot;]<br /> };</p> <p>var vm = new Vue({<br /> el: '#root',<br /> data:data,<br /> mounted() {<br /> document.querySelector('#submit').addEventListener('click',function(){</p> <p> let nameElement = document.querySelector('#addName'); //监听<br /> vm.names.push(nameElement.value); // 添加姓名<br /> nameElement.value = ''; // 清空输入框<br /> })<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"root"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span> = <span class="hljs-string">"name in names"</span>&gt;</span> {{ name }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span> &lt;input type=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"addName"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"submit"</span>&gt;</span>添加姓名<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; /</span><span class="hljs-regexp">/ js let data = { names: ["jack","rose","kaka","curry"] }; var vm = new Vue({ el: '#root', data:data, mounted() { document.querySelector('#submit').addEventListener('click',function(){ let nameElement = document.querySelector('#addName'); /</span><span class="hljs-regexp">/监听 vm.names.push(nameElement.value); /</span><span class="hljs-regexp">/ 添加姓名 nameElement.value = ''; /</span><span class="hljs-regexp">/ 清空输入框 }) } });</span></code></pre> <p>实例一加载,就会执行 <code>mounted</code> 函数,我们使用了简写,相当于:</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="mounted:function(){ }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">mounted:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ }</code></pre> <h2 id="articleHeader2">用 vue 添加姓名</h2> <p>现在,我们来用 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 实现同样的功能:</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 lang=&quot;zh-cn&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Document</title><br /> <script src=&quot;https://cdn.bootcss.com/vue/2.2.6/vue.js&quot;></script></p> <p></head><br /> <body></p> <div id=&quot;root&quot;> <li v-for = &quot;name in names&quot;> {{ name }}</li> <p> <input type=&quot;text&quot; v-model=&quot;newName&quot;><br /> <button v-on:click=&quot;addName()&quot;>添加姓名</button> </div> <p> <script></p> <p> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> data = { names: [&quot;jack&quot;,&quot;rose&quot;,&quot;kaka&quot;,&quot;curry&quot;], newName: &quot;&quot; // 绑定 input 元素,最初为空 };</p> <p> var vm = new Vue({ el: '#root', data:data, methods: { addName() { vm.names.push(vm.newName); vm.newName = &quot;&quot;; } } });</p> <p> </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="root"&gt; &lt;li v-for = "name in names"&gt; {{ name }}&lt;/li&gt; &lt;input type="text" v-model="newName"&gt; &lt;button v-on:click="addName()"&gt;添加姓名&lt;/button&gt; &lt;/div&gt; &lt;script&gt; let data = { names: ["jack","rose","kaka","curry"], newName: "" // 绑定 input 元素,最初为空 }; var vm = new Vue({ el: '#root', data:data, methods: { addName() { vm.names.push(vm.newName); vm.newName = ""; } } }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> <p>这里,主要使用了 <code>v-on</code> 指令,一但用户点击添加按钮,就会触发 <code>addName()</code> 方法。<code>v-on</code> 也可以简写成 <code>@</code>:</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="<button @click=&quot;addName()&quot;>添加姓名</button>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">&lt;button @click=<span class="hljs-string">"addName()"</span>&gt;添加姓名&lt;<span class="hljs-regexp">/button&gt;</span></code></pre> <p>方法需要放入 <code>methods</code> 属性,这样既可以通过 <code>vm</code> 来访问,也可以在指令表达式中使用。</p> <p>附录:</p> <ul> <li> <p><a href="https://gist.github.com/ihuangmx/4e37e9ce868b6b405569cfe959d4c613" rel="nofollow noreferrer" target="_blank">本节源码</a><button class="btn btn-xs btn-default ml10 preview" data-url="ihuangmx/4e37e9ce868b6b405569cfe959d4c613" data-typeid="1">点击预览</button></p> </li> <li> <p><a href="https://cn.vuejs.org/v2/guide/list.html#v-for" rel="nofollow noreferrer" target="_blank">列表渲染 - Vue.js</a></p> </li> <li> <p><a href="https://cn.vuejs.org/v2/api/#v-on" rel="nofollow noreferrer" target="_blank">Vue.js</a></p> </li> <li> <p><a href="https://cn.vuejs.org/v2/api/#methods" rel="nofollow noreferrer" target="_blank">Vue.js</a></p> </li> </ul> <p></code></p>

总结

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

Vue 2.0 入门系列(2)列表

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

Vue 2.0 入门系列(2)列表

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

80%的人都看过