Vue隐藏显示、只读实例代码

这篇文章主要为大家详细介绍了Vue隐藏显示、只读实例代码，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

1.Vue隐藏显示

 

代码如下：

<div style="padding-top:5px;" v-bind:class="{hidden: isHidden }">
 <label class="inline">
    <input id="id-button-borders" checked="" v-model="user.userstate" type="checkbox" class="ace ace-switch ace-switch-5" />
    <span class="lbl"></span>
 </label>
 </div>

data:{
    isHidden: true
  }

•v-bind:class=”{hidden: isHidden }” 可动态设置vm.isHidden值
•:class=”{hidden: isHidden }” 简写

 

2.Vue控件只读

 

代码如下：

<input type="text" class="form-control" v-bind:readonly="isReadOnly" validate="notNull,realname" v-model="user.realname"/>1

data:{

    isReadOnly:false
  }

•v-bind:readonly=”isReadOnly” 可动态设置vm.isReadOnly

 

总结

 

以上所述是小编给大家介绍的Vue隐藏显示、只读实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/5233-0.html

注：关于Vue隐藏显示、只读实例代码的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js