<ol> <li> <p>刚开始写代码如下:(运行:<a href="http://jsbin.com/qonoliy/2/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/2/ed...</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=" <div id=&quot;test&quot;> <div class=&quot;item&quot; v-for=&quot;item in items&quot; @click=&quot;toggle(item)&quot; > <div>{{item.name}}</div> <div v-show=&quot;item.show&quot;> 初始隐藏 </div> </p></div> </div> <p><script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#test', data: { items: [{ name: 'a', show: false }, { name: 'b', show: false }, { name: 'c', show: false }] }, methods: { toggle: function(item) { item.show = !item.show; } } }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">"test"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggle(item)"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{{item.name}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"item.show"</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">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">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">'#test'</span>, data: { items: [{ name: <span class="hljs-string">'a'</span>, show: <span class="hljs-literal">false</span> }, { name: <span class="hljs-string">'b'</span>, show: <span class="hljs-literal">false</span> }, { name: <span class="hljs-string">'c'</span>, show: <span class="hljs-literal">false</span> }] }, methods: { toggle: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span> </span>{ item.show = !item.show; } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> </li> <li> <p>由于<code>data.items</code>是后端传过来的,没有<code>show</code>这个字段, 无奈只好把 <code>data.items</code> 遍历添加 <code>show</code> 属性。(运行:<a href="http://jsbin.com/qonoliy/4/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/4/ed...</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="var data = [{ name: 'a', }, { name: 'b', }, { name: 'c', }]; data.map(function(item){ item.show = false; }); new Vue({ el: '#test', data: { items: data }, methods: { toggle: function(item) { item.show = !item.show; } } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">var</span> data = [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'a'</span>, }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'b'</span>, }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'c'</span>, }]; data.map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item</span>)</span>{ item.show = <span class="hljs-literal">false</span>; }); <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#test'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">items</span>: data }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">toggle</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item</span>) </span>{ item.show = !item.show; } } });</code></pre> </li> <li> <p>对服务端数据进行遍历处理还是不太优雅,如果能够在<code>v-for</code> 循环中给 item 添加 show 属性就好了。<br />但是似乎不行。(运行:<a href="http://jsbin.com/qonoliy/5/edit?html,js,output)" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/5/ed...</a></p> </li> <li> <p>@vingojw 提供了在触发 toggle 事件是添加属性的方法 (运行:<a href="http://jsbin.com/qonoliy/6/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/6/ed...</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="toggle: function(item) { Vue.set(item, 'show', this.show = !this.show); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>toggle: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span> </span>{ Vue.set(item, <span class="hljs-string">'show'</span>, <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.show = !<span class="hljs-keyword">this</span>.show); }</code></pre> </li> <li> <p>@X-Ray 提出了一个个写法(运行:<a href="http://jsbin.com/qonoliy/7/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/7/ed...</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="toggle: function($index) { var item = this.items[$index]; var state = item.show; var obj = $.extend(true, {}, item); obj.show = !state; this.items.$set($index, obj); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>toggle: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($index)</span> </span>{ <span class="hljs-keyword">var</span> item = this.items[$index]; <span class="hljs-keyword">var</span> state = item.show; <span class="hljs-keyword">var</span> obj = $.extend(<span class="hljs-keyword">true</span>, {}, item); obj.show = !state; this.items.$set($index, obj); }</code></pre> </li> <li> <p>想起了 angluar 有个 ng-init 似乎可以做此事,vue 暂时没有 v-init 指令,那就自定义一个 v-init 指令<br /><a href="http://jsbin.com/qonoliy/8/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/qonoliy/8/ed...</a></p> </li> <li> <p>angluar 使用 v-init 实现<br /><a href="http://jsbin.com/finayi/edit?html,js,output" rel="nofollow noreferrer" target="_blank">http://jsbin.com/finayi/edit?...</a></p> </li> </ol>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16347.html