【Vue】常用指令之v-bind

2021-10-12 本文已影响0人俊而不逊

Vue.jpeg

📝【Vue】学习养成记，【程序员必备小知识】

📔 今日小知识——Vue常用指令之v-bind

v-bind指令是专门操作属性的指令，那么什么是属性呢？例如我们经常设置图片是src，设置鼠标悬停的文本是title，还有类class等，这种就是属性。

其实元素的属性有很多种的，都是写在元素的内部，那该如何设置属性呢，v-bind这个指令我们又该如何去使用呢？

1. 如何使用v-bind指令

语法是v-bind:属性名=表达式

固定写法：

<img src="图片地址"/>

那要设置属性就是这么写(v-bind写法)，图片的src属性的值就是在data中定义的imgSrc的值

<body>
        <div id="app">
            <img src="图片地址"/>
            <img v-bind:src="imgSrc"/>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var  app = new Vue({
                el:"#app",
                data:{
                    imgSrc:'图片地址'
                }
            })
        </script>
    </body>

2. v-bind设置类名

假设img的class为active，那么使用v-bind设置类名属性，使得active生效可以利用三元表达式，如果isActive为真就设置active，如果isActive为假就设置为空。

<img class="active"/>
<img v-bind:class="isActive?'active':''"/>

三元表达式看起来表达式，代码有点多，还有另一种写法，对象的写法

<img v-bind:class="{active:isActive}"/>

active类名是否生效，取决于isActive的值，如果isActive为真active就生效，如果isActive为假就不生效。

3. v-bind简写

<img :src="imgSrc"/>
<img :class="isActive?'active':''"/>
<img :class="{active:isActive}"/>

4.总结

v-bind指令的作用是为元素绑定属性
语法是v-bind:属性名
简写可以省略v-bind只保留:属性名
需要动态的添加class建议使用对象的方式

Vue 官方文档：http://vuejs.org/v2/guide/syntax.html

Vue 中文文档: https://cn.vuejs.org/v2/guide/syntax.html

5. 写在后面

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹