标签：red tle 指令 bsp time 绑定 and col img
所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。
在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。
1. v-if v-else-if v-else
2. v-show
一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
3. v-bind 简写为 :
4. v-on 简写为 :@
5. v-for
6. v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> *{ padding: 0; margin: 0 } .box{ width: 100px; height: 100px; background-color: red; } .box2{background-color: green;} .box3{background-color: yellow;} .lunbo ul{width: 180px; overflow: hidden; list-style: none;} .lunbo ul li{float: left; width: 30px; height: 30px; background-color: purple; margin-left: 5px; line-height: 30px; text-align: center; color: white;} </style> </head> <body> <div id="app"> <h3>{{123}}</h3> <h3>{{msg}}</h3> <h3>{{11>2?‘真的‘:‘假的‘}}</h3> <div v-if=‘show‘>haha</div> <div v-if=‘isShow‘>haha</div> <!-- <button v-on:click=‘clickHandler‘>切换</button> --> <!-- 简写方式 --> <button @click=‘clickHandler‘>切换</button> <div v-if=‘Math.random() > 0.5‘> Now you see me ! {{Math.random()}} </div> <div v-else> Now you don‘t {{Math.random()}} </div> <!-- <div v-show=‘ isShow‘ v-bind:title=‘title‘>我是一个三级标题</div> --> <!-- 绑定的简写方式 --> <div v-show=‘ isShow‘ :title=‘title‘>我是一个三级标题</div> <img v-bind:src="imgSrc" :title=‘title‘ width="100px" height="100px"> <!-- v-bind: 简写 : v-on:click 简写 @click --> <div class="box" :class="{box2:isGreen,box3:isYellow}"></div> <button @click=‘changeColor‘>切换颜色{{isGreen}}{{isYellow}}</button> <button @click=‘count+=1‘>加{{count}}</button> <hr> <div class="lunbo"> <img :src="currentSrc" @mouseenter=‘closeTimer‘ @mouseleave=‘openTimer‘ width="100" height="100"> <ul> <li v-for = "(item,index) in imgArr" @click=‘currentHandler(item)‘>{{index+1}}</li> </ul> </div> <button @click=‘nextImg‘>下一张</button> <h2 v-html=‘str‘></h2> </div> <script> var app = new Vue({ el:‘#app‘, data:{ msg:‘学习vue‘, msg2:‘学习vue2‘, show:false, isShow:true, title:‘hahaha‘, imgSrc:‘./haha.jpg‘, isGreen:false, isYellow:true, count:0, imgArr:[ {id:1,src:‘./1.jpg‘}, {id:2,src:‘./2.jpg‘}, {id:3,src:‘./3.jpg‘}, {id:4,src:‘./4.jpg‘} ], currentSrc:‘./1.jpg‘, currentIndex:0, timer:null, str:‘<p>嘿嘿嘿</p>‘ }, created(){ // 加载dom之前 // 开启定时器 // 获取cookie session 提前获取出来 this.timer = setInterval(this.nextImg,2000) }, methods:{ clickHandler(){ this.show=!this.show }, changeColor(){ this.isGreen = !this.isGreen; this.isYellow = !this.isYellow }, currentHandler(item){ this.currentSrc = item.src; }, nextImg(){ if(this.currentIndex == this.imgArr.length-1){ this.currentIndex=-1 } this.currentIndex++ this.currentSrc = this.imgArr[this.currentIndex].src }, closeTimer(){ clearInterval(this.timer) }, openTimer(){ this.timer = setInterval(this.nextImg, 2000) } } }) </script> </body> </html>
标签：red tle 指令 bsp time 绑定 and col img
原文地址：https://www.cnblogs.com/jjwxy/p/9682762.html
