Vue框架---绑定指令

最新推荐文章于 2024-09-05 16:15:02 发布

Amo@骄纵

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量249

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/wdfxfff/article/details/122907889

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue.js中v-bind指令的三种基本用法：1) v-bind绑定URL，用于设置图片源；2) v-bind绑定class，根据数据动态切换CSS类；3) v-bind绑定style，动态设置元素样式。示例代码展示了如何在实际应用中使用这些特性。

摘要由CSDN通过智能技术生成

1.搭建环境：idea

2.v-bind绑定URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<!--
<div id="app">
    <img v-bind:src="imgURL">
</div>
-->
<div id="app">
    <img :src="imgURL">
</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            imgURL:'https://img.alicdn.com/imgextra/i2/26121140/O1CN01NfHQx71KIACWwdsQb_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'
        }
    });
</script>

</body>
</html>

3.v-bind绑定class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
  <!-- <h2 class="active">{{message}}</h2>-->
    <!--<h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
    <!--<h2 v-bind:class="{类名1:bolean,类名2:bolean}">{{message}}</h2>-->
    <!--<h2 :class="{active:true,line:false}">{{message}}</h2>-->
    <h2 :class="{active:isactive,line:isline}">{{message}}</h2>
</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello,vue",
            isactive:true ,
            isline: false
        }
    });
</script>

</body>
</html>

4.v-bind绑定style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--<h2 v-bind:style="{key(属性名)：value(属性值)}">{{message}}</h2>-->
 <!--   <h2>{{message}}</h2>-->
    <h2 :style="{backgroundColor:finalcolor}">{{message}}</h2>
    <h2 :style="{fontSize:finalsize+'px',backgroundColor:finalcolor}">{{message}}</h2>

</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello,vue",
            finalcolor: 'red',
            finalsize:100
        }
    });
</script>

</body>
</html>