【vue指令---v-bind 可以简写：】

最新推荐文章于 2023-06-08 11:50:10 发布

studyer网

最新推荐文章于 2023-06-08 11:50:10 发布

阅读量1.6k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_56349322/article/details/123128520

版权

本文介绍了Vue.js中v-bind指令的用法，特别是其简写形式`:attr`。通过示例展示了如何使用`:class`根据变量绑定不同的CSS类，以及如何用`:src`绑定图片源。内容涵盖了三元表达式和对象方式的绑定，并强调了简写形式的便利性。

摘要由CSDN通过智能技术生成

v-bind绑定属性 :class :title :src

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" @click='toggleActive'
    :class="isActive?'active':''"
    >
</div>

这里 :class="isActive?'active':'' " 等同于 :class="{acitve:isActive}" 使用对象的方式写更好

三元表达式：如果isActive的值为true class='active'

如果isActive的值为false class=''

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#