1 v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-show: 是否显示 --> <div v-show="isShow"> <input type="button" value="-"> <span>{{ myNum }}</span> <input type="button" value="+"> </div> <div> <input type="button" value="隐藏/显示" @click="changeIsShow"> </div> <!-- v-show: 根据变量大小控制 --> <div v-show="myNum>1"> <img src="lizi.jpg"> </div> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） myNum: 0, isShow: true, }, methods: { changeIsShow(){ this.isShow = !this.isShow; }, }, }) </script> </body> </html>
2 v-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-show: 是否显示 --> <div v-show="isShow"> <input type="button" @click="mySub" value="-"> <span>{{ myNum }}</span> <input type="button" @click="myAdd" value="+"> </div> <div> <p id="age30" v-if="isShow">可以看到我啦</p> </div> <div> <p id="age30+" v-if="myNum>3">3岁+啦，应该明白事啦</p> </div> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） myNum: 0, isShow: true, }, methods: { myAdd(){ this.myNum = this.myNum + 1; }, // 方法中调用数据 mySub(){ this.myNum = this.myNum - 1; } }, }) </script> </body> </html>
3 v-bind: 元素属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <!-- v-bind: 元素属性操作 --> <div> <img v-bind:src="imgSrc" :title="imgTitle + ‘!!!!!!!‘" :class="{active: isActive}" @click="toggleActive"> <!-- <img :title="imgTitle">--> </div> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） imgSrc: "./1.jpg", imgTitle: "wu kong", isActive: true }, methods: { toggleActive(){ this.isActive = !this.isActive; } }, }) </script> </body> </html>
4 一个小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <!-- v-bind: 元素属性操作 --> <div> <p> <!-- javascript:void(0) 单击此处什么也不会发生，仅仅表示一个死链接 --> <a class="left" href="javascript:void(0)" @click="prev" v-show="index!=0">上一张</a> </p> <p> <a class="right" href="javascript:void(0)" @click="next" v-show="index!=3">下一张</a> </p> <img :src="imgArr[index]" style="margin-top: 50px"> </div> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） imgArr: [ "./5.jpg", "./6.jpg", "./7.jpg", "./8.jpg" ], index: 0, }, methods: { prev(){ this.index--; }, next(){ this.index++; } }, }) </script> </body> </html>
原文：https://www.cnblogs.com/lizitestdev/p/14645326.html