Vue——v-bind指令

news/2024/7/10 1:10:08 标签: vue

给标签动态绑定一个属性

作用: 动态的去绑定一个或者多个特性（属性）

<body>
    <img id="sel" v-bind:src="src"></img>
    
    <!-- 可以省略v-bind -->
    <!-- <img id="sel" :src="src"></img> 效果同上--> 
    
    <script>
        let vm = new Vue({
            el:"#sel",
            data:{
                src:"./img"
            }
        })    
    </script>
</body>

在这里插入图片描述

给标签动态绑定一个特性名

<body>
    <img id="sel" :[key]="val"></img>
    <!-- 可以省略v-bind -->
    <!-- <img id="sel" :src="src"></img> -->
    <script>
        let vm = new Vue({
            el:"#sel",
            data:{
                key:"src",
                val:"./img"
            }
        })    
    </script>
</body>

最终的标签结果跟上面一样

给标签添加多个属性

<body>
    <img id="sel" v-bind="{[key]:val,[key1]:val1}"></img>
    <script>
        let vm = new Vue({
            el: "#sel",
            data: {
                key: "src",
                val: "./img",
                key1: "title",
                val1: "test"
            }
        })    
    </script>
</body>

在这里插入图片描述

给元素添加多个类名

<body>
    <img id="sel" class="c1" :class="much"></img>
    <script>
        let vm = new Vue({
            el: "#sel",
            data: {
                much:[
                    "c2","c3","c4"
                ]
            }
        })    
    </script>
</body>

在这里插入图片描述
我们可以通过数组或者对象的方式，动态添加多个类名过去。需要注意的是，如果标签原本有class，则会叠加到一起，且优先级高于vue动态添加（因为行内元素优先级高）。

在数组语法中也可以使用三元表达式来切换class

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

也可以用绑定class的方法为style绑定属性

绑定style
- 使用对象语法
  看着比较像CSS，但其实是一个JavaScript对象
  CSS属性名可以用驼峰式(camelCase)或者短横线分隔(kebab-case)来命名
  但是使用短横线分隔时，要用引号括起来
```
<div v-bind:style="{ fontSize: size + 'px' }"></div>
```
```
data: {
  size: 30
}
```
  也可以直接绑定一个样式对象，这样模板会更清晰：
```
<div v-bind:style="styleObject"></div>
```
```
data: {
  styleObject: {
    fontSize: '13px'
  }
}
```
- 使用数组语法
  数组语法可以将多个样式对象应用到同一个元素
```
<div v-bind:style="[styleObjectA, styleObjectB]"></div>
```
缩写: :
修饰符：
修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
- .camel
  由于绑定特性时，会将大写字母转换为小写字母，如：
```

<svg :viewBox="viewBox"></svg>
```
  所以，Vue提供了v-bind修饰符 camel，该修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性
```
<svg :view-box.camel="viewBox"></svg>
```