Section 7 class and style bindings

A method of rendering:
Method two renderings:
Method three renderings:
Code:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>1.方法一</p>
<div id="one">
    <p v-bind:id="attribute_name">猜猜我是谁</p>
</div>
<script type="text/javascript">
    new=el_vbindwas  Vue({
        el: '#one',
        data:{
            attribute_name: 'id_red'
        }
    })
</script>
<style type="text/css">
    #id_red{
        color: red;
    }
</style>
<br/>
<p>2.方法二</p>
<div id="two">
    <p v-bind:class= "{Active: isActive, clsssNameTwo: isTwo}" > ha ha </ P > 
    <-! render the following: that is equivalent to the following when isActive: true, isTwo: when to true -> 
    ! <- <P class = "active classNameTwo"> ha ha </ P>   -> 
</ div > 
< Script type = "text / JavaScript" > 
    var el_vbind2 =  new new Vue ({ 
        EL: ' #two ' , 
        Data: { 
            isActive: to true , 
            isTwo: to true 
        } 
    }) 
</script>
<style type="text/css">
    .active{
        color: blue;
    }
</style>
<br/>
<p>3.方法三</p>
<div id="three">
    <p v-bind:style="three_style">哎哟哦哦哦</p>
</div>
<script type="text/javascript">
    =el_vbind3was new Vue({
        el:'#three',
        data:{
            three_style:{
                color: 'green',
                fontSize: '20px'
            }
        }
    })
</script>
</body>
</html>
Section 7 class and style bindings

Guess you like
