简单介绍vue的列表渲染

<p><code></p> <h1 id="articleHeader0">列表渲染</h1> <h2 id="articleHeader1">1、用 v-for 把一个数组对应为一组元素</h2> <h5>v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <div v-for=&quot;items in todo&quot;>{{items.text}}</div> </p></div> <p> <script> var app = new Vue({ el:&quot;#app&quot;, data:{ todo:[ {text:&quot;吃饭&quot;,ok:true}, {text:&quot;睡觉&quot;,ok:true}, {text:&quot;打豆豆&quot;,ok:true}, ] } }) </script> 打印结果为:吃饭,睡觉,打豆豆" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"items in todo"</span>&gt;</span>{{items.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ todo:[ {text:<span class="hljs-string">"吃饭"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"睡觉"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"打豆豆"</span>,ok:<span class="hljs-literal">true</span>}, ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果为:吃饭,睡觉,打豆豆</code></pre> <h5>在 v-for 块中,我们拥有对父作用域属性的完全访问权限。</h5> <h5>v-for 还支持一个可选的第二个参数为当前项的索引。</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <div v-for=&quot;(items,index) in todo&quot;>{{index}}{{items.text}}</div> </p></div> <p> <script> var app = new Vue({ el:&quot;#app&quot;, data:{ duixiang:{ name:&quot;吴健&quot;, sex:&quot;男&quot;, age:&quot;28&quot; }, todo:[ {text:&quot;吃饭&quot;,ok:true}, {text:&quot;睡觉&quot;,ok:true}, {text:&quot;打豆豆&quot;,ok:true}, ] } }) </script> 打印结果为:0吃饭,1睡觉,2打豆豆" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(items,index) in todo"</span>&gt;</span>{{index}}{{items.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ duixiang:{ name:<span class="hljs-string">"吴健"</span>, sex:<span class="hljs-string">"男"</span>, age:<span class="hljs-string">"28"</span> }, todo:[ {text:<span class="hljs-string">"吃饭"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"睡觉"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"打豆豆"</span>,ok:<span class="hljs-literal">true</span>}, ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果为:0吃饭,1睡觉,2打豆豆</code></pre> <h3 id="articleHeader2">1.1、一个对象的 v-for</h3> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <div v-for=&quot;(dui,key,index) in duixiang&quot;>索引:{{index}}键名:{{key}}:{{dui}}</div> </p></div> <p> <script> var app = new Vue({ el:&quot;#app&quot;, data:{ duixiang:{ name:&quot;吴健&quot;, sex:&quot;男&quot;, age:&quot;28&quot; } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(dui,key,index) in duixiang"</span>&gt;</span>索引:{{index}}键名:{{key}}:{{dui}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ duixiang:{ name:<span class="hljs-string">"吴健"</span>, sex:<span class="hljs-string">"男"</span>, age:<span class="hljs-string">"28"</span> } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h5>他可以有多个参数,我们第二参数为键名,第三个位索引</h5> <h5>上面的打印结果</h5> <p><span class="img-wrap"><img data-src="/img/bVT8QR?w=240&amp;h=77" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader3">2、一个组件的v-for</h2> <h4>切记当在组件中使用 v-for 时,key 是必须要有的</h4> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <todos v-for = &quot;(iemts,index) in todo&quot; v-bind:meitiao=&quot;iemts.text&quot; :key=&quot;index&quot;></todos> </div> <p> <script> Vue.component(&quot;todos&quot;,{ template:&quot;</p> <div>{{this.meitiao}}<input type = 'button' value='查看'/></div> <p>&quot;, //注册属性 props:[&quot;meitiao&quot;] }) var app = new Vue({ el:&quot;#app&quot;, data:{ todo:[ {text:&quot;吃饭&quot;,ok:true}, {text:&quot;睡觉&quot;,ok:true}, {text:&quot;打豆豆&quot;,ok:true}, ] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">todos</span> <span class="hljs-attr">v-for</span> = <span class="hljs-string">"(iemts,index) in todo"</span> <span class="hljs-attr">v-bind:meitiao</span>=<span class="hljs-string">"iemts.text"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">todos</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"> Vue.component(<span class="hljs-string">"todos"</span>,{ template:<span class="hljs-string">"&lt;div&gt;{{this.meitiao}}&lt;input type = 'button' value='查看'/&gt;&lt;/div&gt;"</span>, <span class="hljs-comment">//注册属性</span> props:[<span class="hljs-string">"meitiao"</span>] }) <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ todo:[ {text:<span class="hljs-string">"吃饭"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"睡觉"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"打豆豆"</span>,ok:<span class="hljs-literal">true</span>}, ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVT8RY?w=206&amp;h=110" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader4">3、对象跟新检测</h2> <h5>vue不允许添加根属性</h5> <h5>添加属性vue给我们提供了2中方法</h5> <h6>第一种Vue.set(目标对象,"属性","值")</h6> <h6>第二种app.$set(目标对象,"属性","值")</h6> <h5>删除属性vue给我们也提供了2中方法</h5> <h6>第一种Vue.delete(目标对象,"属性")</h6> <h6>第二种app.$delete(目标对象,"属性")</h6> <h2 id="articleHeader5">4、显示过滤+一段取值范围的v-for + v-for on a &lt;template&gt;</h2> <h3 id="articleHeader6">4.1、显示过滤</h3> <h5>有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。</h5> <h5>例如过滤偶数</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <div v-for=&quot;num in evenNum&quot;>{{ num }}</div> </p></div> <p> <script> var app = new Vue({ el:&quot;#app&quot;, data:{ numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] }, computed: { evenNum: function () { return this.numbers.filter(function (item) { return item % 2 === 0; }) } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"num in evenNum"</span>&gt;</span>{{ num }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ numbers: [ <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span> ] }, computed: { evenNum: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.numbers.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(item)</span> </span>{ <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>; }) } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="结果为: 2 4 6 8" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>结果为: 2 4 6 8</code></pre> <h3 id="articleHeader7">4.2、段取值范围的v-for</h3> <h5>v-for 也可以取整数。在这种情况下,它将重复多次模板。</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div> <span v-for=&quot;n in 10&quot;>{{ n }} </span> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"n in 10"</span>&gt;</span>{{ n }} <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="结果为 1 2 3 4 5 6 7 8 9 10" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">结果为</span> <span class="hljs-attr">1</span> <span class="hljs-string">2 3 4 5 6 7 8 9 10</span></code></pre> <h3 id="articleHeader8">4.3、v-for on a &lt;template&gt;</h3> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <ul> <template v-for=&quot;item in items&quot;> </p> <li>{{ item.text }}</li> <p> </template> </ul> </p></div> <p> <script> var app = new Vue({ el:&quot;#app&quot;, data:{ items:[ {text:&quot;吃饭&quot;,ok:true}, {text:&quot;睡觉&quot;,ok:true}, {text:&quot;打豆豆&quot;,ok:true}, ] } }) </script> 打印结果为:吃饭,睡觉,打豆豆" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>{{ item.text }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ items:[ {text:<span class="hljs-string">"吃饭"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"睡觉"</span>,ok:<span class="hljs-literal">true</span>}, {text:<span class="hljs-string">"打豆豆"</span>,ok:<span class="hljs-literal">true</span>}, ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果为:吃饭,睡觉,打豆豆</code></pre> <h2 id="articleHeader9">5、数组检测跟新</h2> <h3 id="articleHeader10">变异方法(mutation method)</h3> <h5>5.1、说白了就是改变被这些方法调用的原始数组。</h5> <h5>Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:</h5> <h6>push()</h6> <h6>pop()</h6> <h6>shift()</h6> <h6>unshift()</h6> <h6>splice()</h6> <h6>sort()</h6> <h6>reverse()</h6> <h3 id="articleHeader11">5.2、非变异方法</h3> <h5>例如: filter(), concat() 和 slice() 。</h5> <h3 id="articleHeader12">5.2、重塑数组</h3> <h5>。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>example1.items = example1.items.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(item)</span></span> { <span class="hljs-keyword">return</span> item.message.<span class="hljs-built_in">match</span>(/Foo/) })</code></pre> <h5>你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。 Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。</h5> <h3 id="articleHeader13">5.3、注意事项</h3> <h5>由于 JavaScript 的限制, Vue 不能检测以下变动的数组:</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: vm.items.length = newLength" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: vm.items.length = newLength</code></pre> <h4>为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:</h4> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>Vue.<span class="hljs-keyword">set</span>(example1.items, indexOfItem, newValue) <span class="hljs-comment">// Array.prototype.splice</span> example1.items.splice(indexOfItem, <span class="hljs-number">1</span>, newValue)</code></pre> <h5>为了解决第二类问题,你可以使用 splice:</h5> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="example1.items.splice(newLength)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">example1</span><span class="hljs-selector-class">.items</span><span class="hljs-selector-class">.splice</span>(<span class="hljs-selector-tag">newLength</span>)</code></pre> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » 简单介绍vue的列表渲染

发表评论

提供最优质的资源集合

立即查看 了解详情