Vue学习(三)-v-bind指令学习-白红宇的个人博客

Vue学习(三)-v-bind指令学习

发布日期：2021-05-18 11:06:19 浏览次数：26 分类：原创文章

本文共 2781 字，大约阅读时间需要 9 分钟。

二，v-bind动态绑定属性

v-bind

语法

动态绑定一个标签的属性

只要一个属性被加 v-bind，该属性的值就会被当成模板变量解析

<img v-bind:src="img1" alt=""><script>    var app = new Vue({                el: '#app',        data: {                    img1: 'imgs/1.jpg'        },    })</script>

在这里插入图片描述

语法糖写法

<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>

v-bind对象语法

class 后面填写的是一个对象

用法一：绑定一个类，根据active的值来选择留下还是删除

<p :class="{active: true}">你好</p>

用法二：传入多个值

<p :class="{active: true, big: false}">你好</p>

用法三：和class定义的类名不冲突，三个类名会合并

<p class="bgc" :class="{active: true, big: true}">你好</p>

用法四：把类名放在一个函数中进行计算后返回

<p class="bgc" :class="getAttr()">你好</p>methods: {    getAttr: function() {        return {            active: this.isActive,            big: this.isBig        }    }}

v-bind数组语法

class 后面填写一个数组

示例

<div id="app">    <p class="bgc" :class="[active, big]">你好</p>    <p class="bgc" :class="getAttr()">你好</p></div><script>    var app = new Vue({            el: '#app',        data: {                img1: 'imgs/1.jpg',            active: 'active',            big: 'big',        },        methods: {                getAttr: function() {                    return [this.active, this.big]            }        }    })</script>

在这里插入图片描述

v-bind动态绑定Style

我们可以使用 v-bind:style 来绑定一些CSS样式

对象绑定

<div id="app">    <section :style="{      fontSize: font1}"> {  {message}} </section>    <section :style="{      fontSize: font2 + 'px'}"> {  {message}} </section>    <section :style="myStyle"> {  {message}} </section></div>var app = new Vue({    el: '#app',    data: {        message: 'Hello Vue!',        font1: '50px',        font2: 60,        myStyle: {            color: 'red',            fontSize: '70px'        }    }})

在这里插入图片描述

数组绑定

<div id="app">    <section :style="[baseStyle, baseStyle1]"> {   {   message}} </section></div>var app = new Vue({       el: '#app',    data: {           message: 'Hello Vue!',        baseStyle: {               color: 'gold',            backgroundColor: 'black',            fontSize: '50px'        },        baseStyle1: {               width: '200px'        }    }})

在这里插入图片描述

案例1：点击切换Class

<style>    .active {            color: red;    }    .big {            font-size: 20px;    }    .bgc {            background-color: aqua;    }</style></head><body>    <div id="app">        <p class="bgc" :class="{active: isActive, big: isBig}">你好</p>        <button @click="btnClick">按钮</button>    </div>    <script>        var app = new Vue({                el: '#app',            data: {                    img1: 'imgs/1.jpg',                isActive: true,                isBig: true,            },            methods: {                    btnClick: function() {                        this.isActive = !this.isActive;                    this.isBig = !this.isBig;                }            }        })    </script></body>

在这里插入图片描述

上一篇：Vue学习(四)-计算属性computed

下一篇：Vue学习(二)-胡子({{}})语法

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

二，v-bind动态绑定属性

语法

语法糖写法

v-bind对象语法

v-bind数组语法

示例

v-bind动态绑定Style

对象绑定

数组绑定

案例1：点击切换Class

发表评论

最新留言

关于作者

推荐文章