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

Vue入门精华-1

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>实例</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="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;></div> <p> </body> <script> <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex = <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> Vue({ el :'#index' }) </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</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">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span> }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>上面就是一个最基础的Vue实例,你大概可以理解为 id 为“index”的元素下的所有内容,这块可以理解为一个作用域,都交给 Vue 去处理。</p> <p>那么,把创建实例的这部分代码拿出来讲解一下:</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> var index = new Vue({ el :'#index' //el 选项是为了挂载元素 data : {} //data选项是初始化数据用的,同样也是作为页面加载时候请求后端的数据 }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span> <span class="hljs-comment">//el 选项是为了挂载元素</span> data : {} <span class="hljs-comment">//data选项是初始化数据用的,同样也是作为页面加载时候请求后端的数据</span> }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>剩下的讲起来还是比较费劲的,可以去看一下官网的api文档,讲的还是很详细的。</p> <p><span class="img-wrap"><img data-src="/img/bV0JX7?w=2880&amp;h=1604" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>我发现那些基础的讲起来比较费劲,好吧,我确实词比较穷,基础指令这些就不再细讲了,来上一些比较实用的吧。</p> <h3 id="articleHeader1">Vue<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>方法</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="1. push() : 往数组的结尾添加 2. unshift() : 往数组的开头添加 3. reverse() : 颠倒数组的顺序 4. shift() : 删除数组开头的项目 5. pop() : 删除数组结尾的项目 6. splice(startIndex,num,item) : startIndex : 开始的索引; num : 影响的数据,来判定是添加还是修改; item : 要添加或者修改的对象; 比如 : arr.splice(1,0,item) : 是要在arr索引为1的位置添加Item项目,之前在1位置的项目会后移; arr.plice(1,1,item) : 是要修改索引为1的项目,变成item;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code><span class="hljs-bullet">1. </span>push() : 往数组的结尾添加 <span class="hljs-bullet">2. </span>unsh<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>t() : 往数组的开头添加 <span class="hljs-bullet">3. </span>reverse() : 颠倒数组的顺序 <span class="hljs-bullet">4. </span>shift() : 删除数组开头的项目 <span class="hljs-bullet">5. </span>pop() : 删除数组结尾的项目 <span class="hljs-bullet">6. </span>splice(startIndex,num,item) : <span class="hljs-code"> startIndex : 开始的索引;</span> <span class="hljs-code"> num : 影响的数据,来判定是添加还是修改;</span> <span class="hljs-code"> item : 要添加或者修改的对象;</span> <span class="hljs-code"> 比如 : arr.splice(1,0,item) : 是要在arr索引为1的位置添加Item项目,之前在1位置的项目会后移;</span> <span class="hljs-code"> arr.plice(1,1,item) : 是要修改索引为1的项目,变成item;</span></code></pre> <h3 id="articleHeader2">键盘事件</h3> <p>开发的时候一般为了友好的体验,会使用键盘事件来代替一些鼠标点击事件,来看看Vue中的写法;</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <input type=&quot;text&quot; v-on:keyup.13=&quot;toDoSomething&quot;></span> <input type=&quot;text&quot; v-on:keyup.enter=&quot;toDoSomething&quot;/> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code> &lt;input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> v-on:keyup<span class="hljs-number">.13</span>=<span class="hljs-string">"toDoSomething"</span>/&gt; &lt;input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> v-on:keyup.enter=<span class="hljs-string">"toDoSomething"</span>/&gt; </code></pre> <h3 id="articleHeader3">v-bind:value 与 v-model</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="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;text&quot; v-bind:value = 'message'/> <span>{{message}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : 'Hello Vue!' } }) </script> //上面这种写法,修改input中的值,span中的message并不会实时的改变。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-bind:value</span> = <span class="hljs-string">'message'</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : <span class="hljs-string">'Hello Vue!'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> //上面这种写法,修改input中的值,span中的message并不会实时的改变。 </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="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;text&quot; v-bind:value = 'message' v-on:input = 'message = $event.target.value'/> <span>{{message}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : 'Hello Vue!' } }) </script> //这种写法,改变input的值,span中的message会实时改变" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-bind:value</span> = <span class="hljs-string">'message'</span> <span class="hljs-attr">v-on:input</span> = <span class="hljs-string">'message = $<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>.target.value'</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : <span class="hljs-string">'Hello Vue!'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> //这种写法,改变input的值,span中的message会实时改变</code></pre> <p>?上面这种用法还有一种语法糖,就是<code>v-model</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;text&quot; v-model=&quot;message&quot;/> <span>{{message}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : 'Hello Vue!' } }) </script> //这个和第二种写法效果是一样的" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : <span class="hljs-string">'Hello Vue!'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> //这个和第二种写法效果是一样的</code></pre> <p>既然都说到这里了,来看一下<code>v-model</code>在表单中的更多的用法:</p> <p>单个<code>checked</code>,当复选框选中与不选中时,message的值会实时改变</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;checkbox&quot; v-model=&quot;message&quot;/> {{message}} </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : <a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a> } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/checkbox" title="浏览关于“checkbox”的文章" target="_blank" class="tag_link">checkbox</a>"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> {{message}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : <span class="hljs-literal">true</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>当时一组<code>checked</code>的时候,message初始化定义成一个空数组,会实时存储被选中复选框的<code>value</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;checkbox&quot; value=&quot;hello vue&quot; v-model=&quot;message&quot;/> hello vue <input type=&quot;checkbox&quot; value=&quot;hello angular&quot; v-model=&quot;message&quot;/> hello angular <input type=&quot;checkbox&quot; value=&quot;hello node&quot; v-model=&quot;message&quot;/> hello <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a> <br /> <span>{{message}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : [] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello vue"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello vue <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello angular"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello angular <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello node"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello node <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : [] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>当是一组<code><a href="http://www.js-code.com/tag/radio" title="浏览关于“radio”的文章" target="_blank" class="tag_link">radio</a></code>的时候,初始化可以定义为空字符串,会实时存储被选中的<code>radio</code>的<code>value</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <input type=&quot;radio&quot; value=&quot;hello vue&quot; v-model=&quot;message&quot;/> hello vue <input type=&quot;radio&quot; value=&quot;hello angular&quot; v-model=&quot;message&quot;/> hello angular <input type=&quot;radio&quot; value=&quot;hello node&quot; v-model=&quot;message&quot;/> hello node <br /> <span>{{message}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { message : '' } }) </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello vue"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello vue <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello angular"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello angular <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hello node"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"message"</span>/&gt;</span> hello node <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { message : <span class="hljs-string">''</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>当时一组<code><a href="http://www.js-code.com/tag/select" title="浏览关于“select”的文章" target="_blank" class="tag_link">select</a></code>框的时候,<code>v-model</code>绑定在<code>select</code>上,会实时更新被选中的<code><a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a></code>的<code>value</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body > </p> <div id=&quot;index&quot; style=&quot;padding-left: 200px&quot;> <select v-model=&quot;selected&quot;><option v-for=&quot;option in options&quot; :value = &quot;option.value&quot;>{{option.value}}</option></select> <span>{{selected}}</span> </div> <p> </body> <script> var index = new Vue({ el :'#index', data : { selected : '', options : [{ 'value' : 'hello vue' },{ 'value' : 'hello angular' },{ 'value' : 'hello options' }] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 200px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">v-<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span>=<span class="hljs-string">"option in options"</span> <span class="hljs-attr">:value</span> = <span class="hljs-string">"option.value"</span>&gt;</span>{{option.value}}<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{selected}}<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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</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> index = <span class="hljs-keyword">new</span> Vue({ el :<span class="hljs-string">'#index'</span>, data : { selected : <span class="hljs-string">''</span>, options : [{ <span class="hljs-string">'value'</span> : <span class="hljs-string">'hello vue'</span> },{ <span class="hljs-string">'value'</span> : <span class="hljs-string">'hello angular'</span> },{ <span class="hljs-string">'value'</span> : <span class="hljs-string">'hello options'</span> }] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

总结

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

Vue入门精华-1

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

Vue入门精华-1

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

80%的人都看过