vue.js使用v-if实现显示与隐藏功能示例

本文实例讲述了vue.js使用v-if实现显示与隐藏功能。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- Vue.js -->
 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
 <p v-if="show">显示这段文本</p>
</div>
</body>
</html>
<script>
 //当数据show的值为true时，p元素会被插入，为false时会被移除
 var myData = {
  show:true
 };
 var app = new Vue({
  el:'#app',
  data:myData,
 })
</script>

此处的v-if判断show为true，正常显示P元素文本，如下图所示：

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏. 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满. 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及. 基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态.其中在父组

  • 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="chec

  • vue实现点击隐藏与显示实例分享

    如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示.实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可. 1.新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签.

  • vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • vue基于input实现密码的显示与隐藏功能

    vue基于input实现密码的显示与隐藏功能

    前言 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果 实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p

  • vue.js使用v-if实现显示与隐藏功能示例

    vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • vue.js实现带日期星期的数字时钟功能示例

    vue.js实现带日期星期的数字时钟功能示例

    本文实例讲述了vue.js实现带日期星期的数字时钟功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net vue.js带日期星期数字时钟</title> <style type="text/css"> html, body { height: 100%;

  • jQuery实现菜单的显示和隐藏功能示例

    jQuery实现菜单的显示和隐藏功能示例

    本文实例讲述了jQuery实现菜单的显示和隐藏功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery显示菜单隐藏和显示</title> </head> <body> <script src="h

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • Vue基于iview实现登录密码的显示与隐藏功能

    Vue基于iview实现登录密码的显示与隐藏功能

    目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

  • vue实现点击某个div显示与隐藏内容功能实例

    1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏 <div v-show="shopShow">内容</div> 2.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件 <div @click="toggleShopShow"> <span class="iconfont icon-close"></span> &

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • Vue.js实现一个todo-list的上移下移删除功能

    Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

随机推荐