lovecoding
/
W250511


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active{
            font-size: 50px;
            font-weight: bold;
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <!-- 绑定属性 只要给一个属性加上v-bind 那么后面的值会被解析成变量 -->
        <img v-bind:src="imgSrc" alt="">
        <!-- <div v-bind:class="a"> hello world</div> -->
        <div v-bind:class="{'active':isActive}">hello world</div>
        <div :class="{'active':isActive}">hello world</div>

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                imgSrc:"./img/logo.png",
                a:"active",
                isActive:true
            }
        })
    </script>
</body>
</html>