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

Vue 2 | Part 4 v-bind绑定元素属性和样式

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>这期跟大家分享的,是<code>v-bind</code>指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。</p> <h4>绑定属性</h4> <p>最简单的例子,我们有一张图片,需要定义图片的<code>src</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=" <div id=&quot;app&quot;> <img src=&quot;https://cn.vuejs.org/images/logo.png&quot; alt=&quot;&quot;> </div> <p><!-- ... ... --></p> <p><script type=&quot;text/javascript&quot;> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cn.<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>.org/images/logo.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <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> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>但是在实际工作中,我们通常会遇到的情况是,图片地址是从数据里返回的,这个时候<code>v-bind</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=" <div id=&quot;app&quot;> <img v-bind:src=&quot;imgSrc&quot; v-bind:alt=&quot;imgAlt&quot; v-bind:title=&quot;imgTitle&quot;> </div> <p><!-- ... ... --></p> <p><script type=&quot;text/javascript&quot;> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { imgSrc: 'https://cn.<a href="http://www.js-code.com/tag/vuejs" title="vuejs" target="_blank">vuejs</a>.org/images/logo.png', imgAlt: 'vue-logo', imgTitle: '这是你指定的title,主人' } }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">img</span> <span class="hljs-attr">v-bind:src</span>=<span class="hljs-string">"imgSrc"</span> <span class="hljs-attr">v-bind:alt</span>=<span class="hljs-string">"imgAlt"</span> <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"imgTitle"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">type</span>=<span class="hljs-string">"text/javascript"</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: { imgSrc: <span class="hljs-string">'https://cn.vuejs.org/images/logo.png'</span>, imgAlt: <span class="hljs-string">'vue-logo'</span>, imgTitle: <span class="hljs-string">'这是你指定的title,主人'</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在浏览器可以看到效果:</p> <p><span class="img-wrap"><img data-src="/img/bVH7Al?w=709&amp;h=454" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="v-bind-img" title="v-bind-img" style="cursor: pointer;"></span></p> <p>这时候你也许会说,每次都要写一遍<code>v-bind</code>好麻烦。没问题,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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <img :src=&quot;imgSrc&quot; :alt=&quot;imgAlt&quot; :title=&quot;imgTitle&quot;> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"imgSrc"</span> <span class="hljs-attr">:alt</span>=<span class="hljs-string">"imgAlt"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"imgTitle"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <h4>绑定行内样式</h4> <p><code>v-bind</code>也可以用于绑定样式,使用行内样式时,关键字是<code>style</code>,跟在html里面直接写行内样式类似。注意样式的写法跟css会有些许不同,横杠分词变成驼峰式分词。</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;app&quot;> <button class=&quot;btn&quot; :style=&quot;{ color: 'white', backgroundColor: 'blue' }&quot;>点击我吧,主人!</button> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"{ color: 'white', backgroundColor: 'blue' }"</span>&gt;</span>点击我吧,主人!<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>当然,把样式写在vue的data里面会方便一些:</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;app&quot;> <button class=&quot;btn&quot; :style=&quot;styles&quot;>点击我吧,主人!</button> </div> <p><!-- ... ... --></p> <p><script type=&quot;text/javascript&quot;> var app = new Vue({ el: '#app', data: { styles: { color: 'white', backgroundColor: 'blue' } } }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"styles"</span>&gt;</span>点击我吧,主人!<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">type</span>=<span class="hljs-string">"text/javascript"</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: { styles: { color: <span class="hljs-string">'white'</span>, backgroundColor: <span class="hljs-string">'blue'</span> } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在浏览器中可以看到html中的行内样式:</p> <p><span class="img-wrap"><img data-src="/img/bVH7Ar?w=1386&amp;h=203" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="v-bind-style" title="v-bind-style" style="cursor: pointer;"></span></p> <h4>绑定<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>样式</h4> <p>更常见的做法肯定是根据数据绑定不同的样式了。这时关键字是<code>class</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=" <style> .is-active { color: white; background-color: green; } </style> <p><body></p> <div id=&quot;app&quot;> <!-- 根据数据中isActive来决定是否把is-active这个class加给元素 --><br /> <button class=&quot;btn&quot; :class=&quot;{ 'is-active': isActive }&quot;>点击我吧,主人!</button> </div> <p> <!-- ... ... --></p> <p> <script type=&quot;text/javascript&quot;> var app = new Vue({ el: '#app', data: { isActive: true } }); </script><br /> </body>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.is-active</span> { <span class="hljs-attribute">color</span>: white; <span class="hljs-attribute">background-color</span>: green; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 根据数据中isActive来决定是否把is-active这个class加给元素 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"{ 'is-active': isActive }"</span>&gt;</span>点击我吧,主人!<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">type</span>=<span class="hljs-string">"text/javascript"</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: { isActive: <span class="hljs-literal">true</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></code></pre> <p>效果如图:</p> <p><span class="img-wrap"><img data-src="/img/bVH7Av?w=943&amp;h=482" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="v-bind-class" title="v-bind-class" style="cursor: pointer;"></span></p> <p>当然,在实际工作中<code>isActive</code>的值一般不会像例子中这样直接写死,而是根据用户的交互或者数据进行判断。</p> <p>这期就到这里,敬请期待下一期:列表渲染和事件监听。</p> <h4>写在最后</h4> <p>源码地址:<a href="https://github.com/levblanc/vue-2-basics" rel="nofollow noreferrer" target="_blank">https://github.com/levblanc/v...</a></p> <p>视频攻略:小的不才,为求一赞,自制 <a href="http://www.bilibili.com/video/av7682999/" rel="nofollow noreferrer" target="_blank">本期视频攻略</a> 在此。</p> <p></code></p>

总结

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

Vue 2 | Part 4 v-bind绑定元素属性和样式

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

Vue 2 | Part 4 v-bind绑定元素属性和样式

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

80%的人都看过