vue数据绑定

Vue数据绑定

Vue中的数据绑定功能极大地提高了开发效率。

 

  • 绑定样式：

可以通过绑定内联样式和绑定样式类这两种方法来实现。

1.绑定内联样式：

在Vue实例中定义的初始数据data,可以通过v-bind将样式数据绑定给DOM元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--绑定样式属性-->
        <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
            <!--绑定样式对象-->
            <div v-bind:style="myDiv"></div>
        </div>
    </div>
    <script>
 var vm=new Vue({
        el:'#app',
        data:{
            myDiv:{backgroundColor:'red',width:'100px',height:'100px'},
            pink:'pink',
            width:'100%',
            height:'200px'
        }
    })
    </script>
   
</body>
</html>
<!--
    内层div的样式是通过绑定myDiv样式对象实现的， 红色
    外层div的样式是绑定data数据中定义的样式属性名实现的。  百分百是粉色  粉色包含着红色
-->
​

2.绑定样式类：

样式类即以类名定义元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
    <style type="text/css">
           .inner{
        background-color: red;
        width: 100px;
        height: 50px;
        border: 2px solid white;
      
    }
    .box{
        background-color: pink;
        width: 100%;
        height: 200px;
    }
    </style>
    
</head>
<body>
    <div id="app">
        <div v-bind:class="box">我是box
            <div v-bind:class="inneer">我是inner1</div>
            <div v-bind:class="inneer">我是inner2</div>
        </div>
    </div>
    <script>
var vm=new Vue({
        el:'#app',
        data:{
            box:'box',
            inneer:'inner',
        }
    })
    </script>
    
</body>
</html>
 
posted @ 2022-09-18 22:54  zjw_rp  阅读(137)  评论(0)    收藏  举报