vue中的v-show,v-if,v-bind的使用示例详解

vue第四课：v-show,v-if,v-bind的使用

1，v-show指令

根据表达式的真假，切换元素的显示和隐藏如：广告，遮罩层等

<div id='app'>
   <input type="button" value="切换显示状态" @click="changeIsshow">
   <input type="button" value="增加年龄" @click="addage">
   <img v-show="isshow" width="200px" height="200px"
     src="https://guangzan.gitee.io/imagehost/Illustrations/summer.png" />
   <img v-show="age>=18" width="200px" height="200px"
     src="https://guangzan.gitee.io/imagehost/Illustrations/summer.png" />
 </div>
<script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
   var app = new Vue({
     el: '#app',
     data: {
       isshow: false,
       age: 17,
     },
     methods: {
       changeIsshow: function () {
         this.isshow = !this.isshow;
       },
       addage: function () {
         this.age++;
       }
     },

})
 </script>

2，v-if指令

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）,频繁操作用v-show,反之用v-if

<div id='app'>
   <input type="button" value="显示/隐藏" @click="changehide">
  <p v-if="isshow">卷完后端卷前端</p>
  <p v-show="isshow">卷完后端卷前端-vshow</p>

</div>
<script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
   var app = new Vue({
     el: '#app',
     data: {
     isshow:false,
     },
     methods: {
       changehide:function(){
         this.isshow = !this.isshow;
       }
     },
   })
 </script>

3，v-bind指令

设置元素的属性比如（src,title,class等）v-bind:属性名=表达式   v-bind:可简写成  :class=""  省掉v-bind

<style>
   .active{
     border: 1px solid red;
   }

</style>
<div id='app'>
 <img v-bind:src="imgsrc"  width="200px" height="200px"  alt=""/><br>
 <img :src="imgsrc"  width="200px" height="200px"  alt="" :title="title+'!!!'"  :class="isactive?'active':''" @click="togactive"/>
 <img :src="imgsrc"  width="200px" height="200px"  alt="" :title="title+'!!!'"  :class="{active:isactive}" @click="togactive"/>
 </div>
<script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
   var app = new Vue({
     el: '#app',
     data: {
       imgsrc:"https://guangzan.gitee.io/imagehost/Illustrations/summer.png",
       title:"vUE卷你",
       isactive:false,
     },
     methods: {
       togactive:function(){
         this.isactive = !this.isactive;
       }
     },
   })
 </script>

来源：https://www.cnblogs.com/superip/p/17292154.html