Vue属性绑定

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

属性绑定

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
            }
        }
    }
})