v-bind

最新推荐文章于 2024-09-01 21:38:19 发布

娃哈哈哈哈呀

最新推荐文章于 2024-09-01 21:38:19 发布

阅读量35

点赞数

分类专栏： Vue 文章标签： css 前端

本文链接：https://blog.csdn.net/karlaofsky/article/details/134151260

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

v-bind:单向数据绑定

样式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    img {
        width: 100px;

    }

    .red {
        width: 100px;
        height: 100px;
        background-color: red;

    }

    .box {
        border-radius: 50%;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
   
</body>

</html>

绑定一个属性


        <img v-bind:src="imageSrc">
        <!-- v-bind 简写 : -->
        <img :src="imageSrc">

内联字符串拼接

 <!-- 使用内联字符串拼接来动态生成image元素的src属性： -->
        <img :src="'../img/good4' +jpg">

class 绑定

<!-- 绑定单个动态类名时    :class="类名变量"-->
        <div :class="redclass"></div><br>
        <!-- 绑定多个动态类名时   :class="[类名变量1,类名变量2]"     -->
        <div :class="[redclass,boxclass]"></div><br>
        <!-- 同时绑定静态+动态类名时   :class='['静态类名'，动态类名变量]'-->
        <div :class="['box1',boxclass]">1</div><br>
        <div :class="boxclass" class="box1">2</div>

style 绑定

<div v-bind:style="[baseStyles, overridingStyles]">娃哈哈，娃哈哈</div>

在v-bind指令中使用逻辑判断时

 <div :class="[num==1?'red':'']"></div>

 <script>
        new Vue({
            el: '#root',
            data: {
                imageSrc: '../img/good4.jpg',
                jpg: '.jpg',
                redclass: 'red',
                boxclass: 'box',
                num: 1,
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {
                    'font-weight': 'bold'
                }

            }
        })
    </script>

效果如下