码迷,mamicode.com
首页 > 其他好文 > 详细

vue指令

时间:2018-12-27 00:25:36      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:function   temp   als   script   state   清空   --   bsp   复用   

条件渲染指令

指令

用法

v-if

v-else-if

v-else

              <div id="app">

                     <p v-if="show">显示这段文本</p>

<!--判断多个元素时可以使用vue的内置元素<template>,最终渲染时不会包含该元素-->

                     <template v-if="state==1">

                            <p>文本</p>

                            <p>文本</p>

                     </template>

                     <p v-if="state==1">当state为1时显示该行</p>

                     <p v-else-if="state==2">当state为2时显示该行</p>

                     <p v-else>否则显示该行</p>

                     <template v-if="type==‘a‘">

                            <label name="a"></label>

<!--切换时出现复用标签问题加key属性:input标签中的值不会被清空加上key,key的值是唯一的-->

                            a:<input key="a-input"> 

                     </template>

                     <template v-if="type==‘b‘">

                            <label name="b"></label>

                            b:<input key="b-input"> 

                     </template>

                     <button @click="typeclick">切换</button>

              </div>

              <script>

                     var app = new Vue({

                            el: ‘#app‘,

                            data: {

                                   show: true,  //为false不显示

                                   state: 1,

                                   type:‘a‘

                            },

                            methods:{

                                   typeclick:function(){

                                          this.type=this.type==‘a‘?‘b‘:‘a‘;

                                   }

                            }

                     })

       </script>

v-show

 与v-if用法相同,区别是这个是控制显示隐藏的,无法使用<template>

vue指令

标签:function   temp   als   script   state   清空   --   bsp   复用   

原文地址:https://www.cnblogs.com/fanningwen/p/10182342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!