Vue v-bind标签的使用

最新推荐文章于 2024-05-10 18:15:56 发布

#Hideonbush

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量605

点赞数

分类专栏： vue笔记

本文链接：https://blog.csdn.net/weixin_41359273/article/details/109334505

版权

vue笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.v-bind标签主要用于动态绑定一些属性，比如src,href，class,style,以及向另外一个组件传递props值。
2.v-bind动态绑定src和href的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
<!--    <a v-bind:href="link">百度</a><br>-->
<!--    <img v-bind:src="img" alt=""/>-->
    <!--语法糖写法，v-bind可以省略掉-->
    <a :href="link">百度</a><br>
    <img :src="img" alt=""/>
</div>
<script src="./vue.js"></script>
<script>
    //延迟加载
    setTimeout(() => {
        const content = new Vue({
            el: '#content',
            data: {
                link: 'http://www.baidu.com',
                img: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2974190632,206575750&fm=26&gp=0.jpg'
            }
        })
    },2000)
</script>
</body>
</html>

结果
在这里插入图片描述 3.v-bind动态绑定class有两种方式，对象语法和数组语法
1）对象语法的使用

<h1 :class="{'active':isActive}">Hello Java</h1>

也可以接多个

<h1 :class="{'active':isActive,'salt':isSalt}">Hello Java</h1>

当然，当要绑定的class过多时，我们也可以把它放在一个method或者computed中,如下getClasses为一个method或者一个计算属性

<h1 :class="getClasses">Hello Java</h1>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
        .salt{
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="content">
    <h2 :class="{'active' : isActive}">Hello Java</h2>
    <h2 :class="{'active' : isActive,'salt': isSalt}">Hello Java</h2>
    <h2 :class="getClasses">Hello springboot</h2>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                isActive: true,
                isSalt: true
            },
            computed: {
                getClasses() {
                    return {'salt':this.isSalt}
                }
            }
        })
</script>
</body>
</html>

结果
在这里插入图片描述
2）数组语法，其用法和对象语法差不多，如果想绑定的样式过多，也可以写一个method或者计算属性
用法

<h2 :class="['active']">Hello Vuejs</h2>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: green;
        }
        .salt{
            font-size: 15px;
        }
    </style>
</head>
<body>
<div id="content">
    <h2 :class="['active']">Hello Vue</h2>
    <h2 :class="['active','salt']">Hello JavaScript</h2>
    <h2 :class="getClasses">Hello mybatis</h2>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                isActive: true,
                isSalt: true
            },
            computed: {
                getClasses() {
                    return ['salt']
                }
            }
        })
</script>
</body>
</html>

结果

在这里插入图片描述
4.v-bind动态绑定style,也分为对象语法和数组语法
1）对象语法，后面跟的是一个对象，以key-value形式编写，key为属性名，value为属性值

<h2 :style="{color: currentColor,fontSize: fontSize + 'px'}"></h2>

2)数组语法

<h2 :style="[baseStyle,specialStyle]"></h2>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2 :style="{color: currentColor, fontSize: fontSize + 'px'}">Hello Spring</h2>
    <h2 :style="[baseStyle,specialStyle]">Hello mybatisplus</h2>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                currentColor: 'Pink',
                fontSize: 10,
                baseStyle: {
                    color: 'green'
                },
                specialStyle: {
                    fontSize: 20 + 'px'
                }
            }
        })
</script>
</body>
</html>

结果

在这里插入图片描述

#Hideonbush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue v-bind标签的使用

1.v-bind标签主要用于动态绑定一些属性，比如src,href，class,style,以及向另外一个组件传递props值。2.v-bind动态绑定src和href的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="
复制链接

扫一扫