【学习笔记-Vue】基础篇-04-v-bind及class与style绑定

【学习笔记-Vue】基础篇-04-v-bind及class与style绑定

目录

1. 了解v-bind指令

2. 绑定class的几种方式

2.1 对象语法

2.2 数组语法

2.3 在组件上使用

3. 绑定内联样式

---

1. 了解v-bind指令

v-bind的主要作用就是动态更新HTML元素上的属性

<div id="app">
    
	<a v-bind:href="url">百度a>
    <img v-bind:src="imgUrl" />
div>

<script>
    var app = new Vue({
        el:'#app',  

        data:{
            url:"http://www.baidu.com",
            imgUrl:"../../chapter02/2.2/img/bd_logo1.png",
        }
    })
script>

2. 绑定class的几种方式

2.1 对象语法

给v-bind.class设置一个对象，可以动态地切换class

<style>
    .fontRed{
        color:red;
    }
style>

···
···

<div id="app">
    <p :class="fontColor">测试对象语法p>
    <button v-bind:disabled="{'disabled' : isDisabled}">按钮button>
    <br>
    <a v-bind:href="url">百度a>
    <br>
    <img v-bind:src="imgUrl" alt="logo">
div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            fontColor:"fontRed",
            isDisabled:"disabled",
            url:"http://www.baidu.com",
            imgUrl:"http://www.baidu.com/img/bd_logo1.png?where=super"
        }
    });
script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iNoFi3Wb-1573644595713)(C:\Users\AlanLee\AppData\Roaming\Typora\typora-user-images\image-20191107091448921.png)]

• 对象中可以传入多个属性，来动态切换class。

<button :class="{'disabled':isDisabled, 'error':isError}" >测试对象语法button>

• :class可以与普通class共存

<p :class="fontColor" class="fontSize-25">测试对象语法p>

2.2 数组语法

使用数组语法，可以同时使用多个class

• 给:class绑定一个数组，应用一个class列表

<style>
    .fontRed{
        color:red;
    }
    .fontSize-25{
        font-size: 25px;
    }
style>

···
···

<div id="app">
    <p :class="[fontRed, fontSize_25]">测试数组语法p>
div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            fontRed:"fontRed",
            fontSize_25:"fontSize-25"

        }
    });
script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-djlTHGZw-1573644595717)(C:\Users\AlanLee\AppData\Roaming\Typora\typora-user-images\image-20191107093121973.png)]

2.3 在组件上使用

暂定

3. 绑定内联样式

给元素绑定内联样式，使用v-bind:style

<div id="app">
    <p v-bind:style="{'color':colorRed, 'font-size':fontSize_25}">绑定内联样式p>
div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            colorRed:"red",
            fontSize_25:25 + 'px'

        }
    });
script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JXi0YKq8-1573644595725)(C:\Users\AlanLee\AppData\Roaming\Typora\typora-user-images\image-20191107093121973.png)]