【学习笔记-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">
    <!-- v-bind -->
	<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