v-bind指令

最新推荐文章于 2024-08-13 17:39:37 发布

bug的生产者

最新推荐文章于 2024-08-13 17:39:37 发布

阅读量85

点赞数

分类专栏： 1.Vue相关指令

本文链接：https://blog.csdn.net/qq_43209768/article/details/95383891

版权

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

8 篇文章 0 订阅

订阅专栏

来源于技术胖的视屏讲解
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>

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind指令

来源于技术胖的视屏讲解1.效果图2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
复制链接

扫一扫

专栏目录