VUE属性绑定

属性绑定

v-bind

如果我们需要设置的模板变量是一个属性，比如a标签的href属性

属性表达式的类型可以是字符串、对象或数组

<div id="app">
    <a v-bind:href="message">连接</a>
</div>

var vm = new Vue({
    el: "#app",
    data: {
    	message: "https://www.baidu.com"
	}
})

可以通过v-bind指令或者:的简写对某个dom元素的属性进行绑定

<a :href="message +'abc'">连接</a>
<!-- 也可以使用 :attr 进行属性绑定 -->

数组样式

还可以通过为元素绑定一个数组，用来为元素设置单个或多个样式，类名在数组中用单引号

<style type="text/css">
    .fontBold {
        font-weight: bold;
    }
    .fontRed {
        color: red;
    }
</style>

<div id="container">
    <p :class="['fontBold','fontRed']">这是一个段落</p>
</div>

动态样式

还可以动态对属性进行切换绑定

对象的key是样式类，对象的value是true或false来动态切换class

注意: 在实例中使用vue对象的属性，要通过this

<div id="container">
    <p :class="{fontBold: flag}" @click="toggle">这是一个段落</p>
    <p :class="{flag? fontBold:''}" @click="toggle">这是一个段落</p>
    <!-- 三元表达式 -->
</div>

var vm = new Vue({
    el: "#container",
    data: {
        flag: true,
    },
    methods: {
        toggle() {
            if (this.flag){ // 判断当前toggle变量的属性，对称变换
                this.flag = false
            }else{
                this.flag = true
            }
        }
    }
})