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

 更新时间:2018年07月18日 09:05:17   作者:Matea2  
本文通过实例代码给大家介绍了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隐藏显示、只读实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue实现自动检测以及版本的更新

    Vue实现自动检测以及版本的更新

    当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢?下面给大家介绍如何站点更新如何在生产环境提示用户更新,进行页面刷新操作,核心原理其实很简单
    2023-03-03
  • Vuex 模块化使用详解

    Vuex 模块化使用详解

    这篇文章主要介绍了Vuex 模块化使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue 组件间的通信之子组件向父组件传值的方式

    vue 组件间的通信之子组件向父组件传值的方式

    这篇文章主要介绍了vue 组件间的通信之子组件向父组件传值的方式总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue项目无法删除的问题及解决

    vue项目无法删除的问题及解决

    这篇文章主要介绍了vue项目无法删除的问题及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue开发实践指南之应用入口

    Vue开发实践指南之应用入口

    这篇文章主要给大家介绍了关于Vue开发实践指南之应用入口的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    本篇文章主要介绍了在vue中通过axios异步使用echarts的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue中自定义指令directive的详细指南

    vue中自定义指令directive的详细指南

    这篇文章主要给大家介绍了关于vue中自定义指令directive的相关资料,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令,需要的朋友可以参考下
    2021-09-09
  • vue中this.$router.go(-1)失效(路由改变了,界面未刷新)

    vue中this.$router.go(-1)失效(路由改变了,界面未刷新)

    本文主要介绍了vue中this.$router.go(-1)失效(路由改变了,界面未刷新),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • Vue中以HTML形式显示内容并动态生成HTML代码的方法

    Vue中以HTML形式显示内容并动态生成HTML代码的方法

    有的时候我们想在vue中直接显示一个html的网页,如果用富文本方式,那么内容就会太多,那么怎么处理呢?这篇文章主要给大家介绍了关于Vue中如何以HTML形式显示内容并动态生成HTML代码的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue中使用词云图的实现示例

    vue中使用词云图的实现示例

    本文主要介绍了vue中使用词云图的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论