Vue框架---绑定指令

最新推荐文章于 2024-07-05 14:02:38 发布

原创最新推荐文章于 2024-07-05 14:02:38 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

Vue 专栏收录该内容

4 篇文章

订阅专栏

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

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>