首页 > 其他分享 >vue(5)v-if与v-show的区别应用

vue(5)v-if与v-show的区别应用

时间:2022-09-19 20:47:10浏览次数:72  
标签:showPic vue false 区别 show showtext 隐藏

v-if如果是false就不生成,v-show如果是false会生成display:none样式的元素。那v-show在什么场景嘞?在隐藏时候用

实例代码

CLICK ME
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8" />
      		<title></title>
      		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
      	</head>
      <body>
      	<div id="app">
      		<input v-on:click="toggle" v-bind:value="showtext" type="button"/>
      		<div v-show="showPic">
      			<img src="img/1.png" >
      		</div>

      	</div>
      </body>

      <script>

      	var vm = new Vue({
      		el:"#app",
      		
      		data:{
      			showPic:false,
      			showtext:"显示"
      		},
      		methods:{
      			toggle:function(){
      				this.showtext=(this.showtext=='显示'?'隐藏':'显示')
      				this.showPic=!this.showPic;
      			}

      		},
      	})
      	

      </script>

      </html>

效果

标签:showPic,vue,false,区别,show,showtext,隐藏
From: https://www.cnblogs.com/wengming/p/16708976.html

相关文章

  • 在 vue项目使用base64加密
    原文链接:https://blog.csdn.net/m0_49016709/article/details/1114754161、vue-cli脚手架搭建前端项目中,使用base64加密传输数据方法一1.安装依赖npminstall--savejs......
  • javascript中的对象和json对象区别
    json对象和javacript对象长得很像,但有本质不同  1、本质区别:(a)、json对象本质上是字符串,他是客户端和服务器之间传递数据的一种格式,他的属性只是样子货,不能执行。(b)......
  • JS---初步使用Vue
    二。使用vue 1.想使用vue,必须创建一个vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html中规范 3.root容器里的代码被称为【vue模板】 --><body> <div......
  • 基础vue的一些知识补充
    一、:disabled该属性能接受布尔值,可以用于元素的使用。当值为true时,该元素将无法被使用,如button的disabled属性被设置为true后,将无法被点击,input的disabled属性被......
  • vue中上传excel文件的方法
    1.使用方法 <inputtype="file"@change="importExcel">或者使用element-ui<el-uploadref="input"action="/":show-file-list="false":auto-upload="false":on......
  • 【Vue项目实践】vue 创建一个新项目
    参考链接:Vite+Electron快速构建一个VUE3桌面应用(一)创建一个Vite项目安装vite并创建项目,输入项目名,模板采用vue,其他的根据情况,可以先全部Noyarncreatevite......
  • 云渲染是什么?云渲染和传统渲染农场有什么区别?
    今天云渲染小编就来和大家说一说云渲染以及它和传统渲染农场的区别。一、什么是云渲染?云渲染什么意思?首先云渲染是一种依托于云计算的云端服务,用户将本地文件提交到云端......
  • vue3组件的几种引入、注册、自动注册等
    全局组件的注册和引入全局组件注册components/index.js【方式一:先引入后注册】importBgImagefrom"@/components/global/web-background/bg-image.vue";importBa......
  • Object和Map的区别?
    相同点二者都是以key-value的形式对数据进行存储;不同点1.key的数据类型范围不同Object:可以作为key的有:number,string,以及es6里面的symbol;Map:js目前存在的数据......
  • 2022-09-19 Error: Cannot find module '项目\node_modules\@vue\cli-service\bin
    前言:wepy项目迁移uniapp使用wepy-to-uniapp转换代码后初始化依赖抛出的错误:Error:Cannotfindmodule'项目\node_modules\@vue\cli-service\bin\vue-cli-service.js'网......