摘要：
<style> * { margin: 0; padding: 0; } #mask { position: relative; width: 300px; height: 626px; background-color: #ccc; margin: 30px auto; } img { width 阅读全文
摘要：
<style> img { width: 300px; } .active { border: 2px solid red; } </style> <body> <div id="app"> <img v-bind:src="imgsrc" alt=""> <img :src="imgsrc" :t 阅读全文
摘要：
<body> <div id="app"> <!-- 方法1 --> <h2 :style="{backgroundColor:'pink',fontWeight:'400'}"> {{ message }} </h2> <!-- 方法2 --> <h2 :style="changeStyle()" 阅读全文
摘要：
<style> .red { color: red; } </style> <body> <div id="app"> <ul> <li v-for="(i , index ) in list" @click="changeLi(index)" :class="{red:redIndex==inde 阅读全文
摘要：
<body> <div id="app"> <button @click="toggleIsShow">切换显示状态</button> <p v-if="isShow">我是一个段落 v-if</p> <p v-show="isShow">我是一个段落 v-show</p> <h2 v-if="te 阅读全文
摘要：
<body> <div id="app"> <div class="box"> <span v-if="isShow"> <label for="username">用户账户</label> <input type="text" placeholder="用户账户" id="username" ke 阅读全文
摘要：
<body> <div id="app"> <h2 v-if="true"> {{ message }} </h2> <h1 v-else> isShow为false时显示</h1> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.1 阅读全文
摘要：
<style> img { width: 200px; } </style> <body> <div id="app"> <button @click="changeisShow">切换显示状态</button> <button @click="addAge">累加年龄</button> <img 阅读全文
摘要：
<style> * { margin: 0; padding: 0; } #app { display: flex; width: 300px; height: 50px; background-color: #ccc; margin: 50px auto; border-radius: 7px; 阅读全文
摘要：
<body> <div id="app"> <input type="button" value="v-on指令" v-on:click="doit"> <input type="button" value="v-on简写" @click='doit'> <input type="button" v 阅读全文