lovecoding
/
W260426


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!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>
        .div1{
            color: red;
        }
        .div2{
            color: blue;
        }
        .div3{
            font-size: 40px;
            color: green;
        }
        h1{
            display: none;
        }
        .active{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind 指令 可以将变量数据绑定到元素的属性上 -->
         <!-- 只要标签属性值为变量那么就可以在属性前面添加 v-bind: 前缀 -->
        <img v-bind:src="imgUrl2" alt="">
        <div v-bind:class="className">hello</div>
        <!-- 可以在指令中使用表达式 -->
        <div v-bind:class="className2+'3'">hello2</div>
        <!-- 可以在指令中使用条件表达式 -->
        <h1 v-bind:class="{'active':isShow}"> 你好 </h1>
        <!-- v-bind 可以缩写为 : -->
         <div :class="className">hello3</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                imgUrl:"./img/logo-mi2.png",
                imgUrl2:"./img/download.png",
                className:"div2",
                className2:"div",
                isShow:false,
            }
        })
    </script>
</body>
</html>