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

最新推荐文章于 2021-09-19 21:22:30 发布

狄鸠

最新推荐文章于 2021-09-19 21:22:30 发布

阅读量150

点赞数

分类专栏： Vue框架学习

本文链接：https://blog.csdn.net/weixin_44038881/article/details/103399973

版权

Vue框架学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

二，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>

在这里插入图片描述

狄鸠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(三)-v-bind指令学习

二，v-bind动态绑定属性v-bind语法动态绑定一个标签的属性只要一个属性被加 v-bind，该属性的值就会被当成模板变量解析<img v-bind:src="img1" alt=""><script> var app = new Vue({ el: '#app', data: { ...
复制链接

扫一扫