VUE中隐藏和限制DIV或其他HTML元素

在Vue中隐藏和限制Div或其他html元素操作非常简单。通常有两种方法可以实现：v-if和v-show这两个判断属性。

下面通过一个简单的实例来了解一下这两种方式的实现。完整实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示和隐藏</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head><body>
<H1>联系通过Vue隐藏和显示Div</H1><div id="app"><div v-if="isShow">{{message}}</div><div v-show="isTrue">欢迎关注微信公众号：程序新视界</div><div><button @click="showOrHideMsg">显示/隐藏(v-if)</button><button @click="showOrHide">显示/隐藏(v-show)</button></div>
</div><script type="text/javascript">var app = new Vue({el: "#app",data: {isShow: true,isTrue: true,message: 'Hello Vue!'},methods: {showOrHideMsg: function () {// 取反this.isShow = !this.isShow;},showOrHide: function () {// 取反this.isTrue = !this.isTrue;}}})
</script>
</body></html>

首先在上面的代码中通过CDN引入了vue.js。通过el指定的vue监控的范围。其中在id为app的div中实现了两种方式的展示v-if=”isShow”和v-show=”isTrue”，他们的用法基本一样。

下面的js脚本中对vue进行初始化，默认这两个div都是显示的。因为isShow和isTrue都默认为true。

然后定义了两个按钮，并对两个按钮进行事件绑定，两个方法的实现都是对默认的布尔类型取反并赋值给自身。

此时，通过点击两个按钮，就可以循环的显示和隐藏div元素。

原文链接：《VUE中隐藏和限制DIV或其他HTML元素》

VUE中隐藏和限制DIV或其他HTML元素相关推荐

vue中，获取一个div的高赋值给另一个div （自适应）
vue中,获取一个div的高赋值给另一个div (自适应) 问题描述: 左侧是video 为了让video不出现黑边 video是16:9的(怎么写成16:9的盒子下次说), 左侧的高度会随着页面宽 ...
Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog
效果图: HTML部分: <div class="tankuangClass"v-show="true"style="width:400px;h ...
VUE中echart自适应外部div大小
父组件:(因为要做动画效果,父组件要放大且居中,最开始时为了自适应全部都是用的是百分比) html: <div ref="testDiv" class="recta ...
【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
vue中搜索关键词,使文本标红
UserHead.vue中搜索框: <el-col :span="6" :offset="8" class=" ...
如何在Vue中使用websocket？
什么是WebSocket : WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范. W ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
Vue中加载mapv和mapvgl
一,加载mapv mapv示例地址:https://mapv.baidu.com/examples/ 1,引入百度地图和mapv 在public/index.html中引入: <script t ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...

VUE中隐藏和限制DIV或其他HTML元素

VUE中隐藏和限制DIV或其他HTML元素相关推荐

最新文章

热门文章