vue.js---v-bind以及class与style的绑定

了解bind指令

v-bind作用：绑定活的属性。
示例：链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲染。

<div id = "app">
    <a v-bind:href = "url">我是百度</a>
    <img :src = "imgUrl" alt = "">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'http://baidu.com',
            imgUrl: 'http://s.bdstatic.com/xbox/wuxian/img/logo426.png'
        }
    })
</script>

绑定 class 的几种方式

对象语法

给 v-bind:class 设置一个对象，可以动态地切换 class，* 值对应true ,false,当值为true时，对应的class就被应用，当为false的时候，class就没有被应用。

<head>
    <meta charset="UTF-8">
    <title>绑定class</title>
    <style>
        .divStyle {
            background: red;
            width: 100px;
            height: 100px;
        }
        .borderStyle {
            border: 10px solid blue;
        }　　
    </style>
</head>
<body>
绑定class！！<br/>
<div id = "app">
    <hr>
    绑定class对象语法：对象的键是类名，值是布尔值<br/>
    <div v-bind:class = "{divStyle: isActive,borderStyle:isBorder}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true,
      isBorder: true
    }
  })
</script>
//因为isActive和isBorder都是true,所以divStyle和borderStyle两个class都被应用。

代码结果截图：

image.png

当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed。

数组语法

绑定class数组语法：数组中的成员直接对应类名。

<div :class = "[activeClass,errorClass]"></div>
var app = new Vue({
    el: '#app',
    data: {
        activeClass:'active',
        errorClass: 'error'
    },
<style>
    .active {
            background: yellow;
            height: 100px;
            width: 300px;
        }
        .error {
            border: 20px solid orange;
        }
</style>

代码结果图：

image.png

可以对象和数组混用

<div id = "app">
    数组和对象混用,第一个成员是对象，第二个成员数数组，
    <div :class = "[{'active':isActive},errorClass]"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
          isActive: true,
            errorClass: 'error'
        }
    })
</script>

绑定内联样式

使用 vbind:style （即：style ）可以给元素绑定内联样式，方法与：class 类似，
也有对象语法和数组语法，看起来很像直接在元素上写 CSS:
注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-case）

应用多个样式对象时，可以使用数组语法 ,在实际业务中,style 的数组语法并不常用，因为往往可以写在一个对象里面 , 而较为常用的应当是计算属性使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀，比如 transform 。无需再加前缀属性！！！！

对象语法：

div id = "app">
    绑定内联样式：键代表style的属性值，值就代表属性对应的值。
    切记：在vue中，任何大写字母都会自动转换成-加小写字母
    <div v-bind:style = "{'color':color,'fontSize':fontSize+'px'}">
        大家晚上好
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
          color: 'red',
          fontSize: 16
        }
    })
</script>

数组语法

<div v-bind:style = "[styleA,styleB]"></div>
styleA: {
            color: yellow
            },
            styleB: {
                ....
            }
//几乎不使用

最后编辑于：2019.08.14 21:30:04