v-bind指令

最新推荐文章于 2025-06-20 09:36:14 发布

原创最新推荐文章于 2025-06-20 09:36:14 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

1.Vue相关指令专栏收录该内容

8 篇文章

订阅专栏

该博客内容来源于技术胖的视频讲解，包含效果图展示以及相关代码。虽未明确具体技术领域，但围绕视频讲解呈现了关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源于技术胖的视屏讲解
1.效果图
在这里插入图片描述
2.代码

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-bind</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
</head>

<body>
    <h1>v-bind实例--绑定的是标签上的属性</h1>
    <hr />
    <div id="app">
        <p><img v-bind:src="imgSrc" width="200px" /></p>
        <p><a :href="webUrl" target="_blank">技术胖</a></p>
        <hr />
        <div :class="className">1.绑定Class</div>
        <div :class="{classA:isOk}">1.绑定Class中的判断</div>
        <div :class="[classA,classB]">3.绑定class中的数组</div>
        <div :class="isOk?classA:classB">4.绑定class中的三元运算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isOk" v-model="isOk">
            <label for="isOk">isOk = {{isOk}} </label>
        </div>
        <hr>
        <!-- 注意fontSize为驼峰写法font-size Vue会报错 -->
        <div :style="{color:blue,fontSize:font}">5.绑定style</div>
        <div :style="styleObject">6.绑定对象style</div>
       
    </div>
    <style>
        .classA {
            color: red;
        }

        .classB {
            font-size: 150%;
        }
    </style>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1807658055,963527062&fm=27&gp=0.jpg",
                webUrl: "http://jspang.com",
                className: "classA",
                isOk:false,
                classA:"classA",
                classB:"classB",
                blue:'blue',
                font:'150%',
                styleObject:{
                    color:'green',
                    fontSize:'24px'
                }
            }
        });
    </script>
</body>

</html>