vue.js--v-show隐藏图片

vue.js–隐藏图片

本次代码利用了vue里面的 v-show指令来进行的，此命令是根据表达式的值来判断是否显示或者隐藏dom元素的当表达式值为true是元素显示，为false时元素隐藏。此命令与 v-if不同使用此命令无论表达式的值为true还是false，该元素都始终会被渲染并保留在dom中绑定值的改变只是简单的切换css属性display

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换图片的显示和隐藏</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box"><input type="button" :value="bText" v-on:click="toggle"><div v-show="show"><img src="face.png"></div>
</div>
<script type="text/javascript">var demo = new Vue({el : '#box',data : {bText : '隐藏图片',show : true},methods : {toggle : function(){//切换按钮文字this.bText == '隐藏图片' ? this.bText = '显示图片' : this.bText = '隐藏图片';this.show = !this.show;//修改属性值}}});
</script>
</body>
</html>

vue.js--v-show隐藏图片相关推荐

Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue.js?v=3e1adf4e‘ does not ...
vue3导入全局变量时,可以运行但是会一直显示报错,如图: 解决方法如下: 在 Vue.js 3 中,"@vue/runtime-core" 是一个包含 Vue.js 运行时核心的 ...
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=bd1817bb‘ does not provide
vite 2.7.8 启动后报错暂时不清楚是 2.7.8 的版本问题还是其他问题.将版本降低到 2.6.13 解决还有可能是vite 预编译缓存的问题,把 node_modules 下的 .vit ...
【毕业设计】基于Vue.js画作交流平台的设计与实现
文章目录摘要 Abstract 引言系统开发理论基础开发语言简介 HTML5 JavaScript Less PHP R Python Go 框架简介 Vue.js ThinkPHP Flask ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
php 图片渲染,vue.js图片怎么渲染
vue.js渲染图片的方法:首先初始化列表:然后获取上个页面带过来的参数,获取api,app,foot:接着向后传递参数:最后渲染本地图片. [相关文章推荐:vue.js] vue.js渲染图片的方法 ...
【vue.js】+云存储（实现图片上传功能）
利用vue.js+element-ui实现云存储上传图片功能文章目录前言一.对象存储二.配置腾讯云Cos 1.引入库第一步拥有腾讯云的开发者账号实名认证三.新建文件上传组件新建上传图片 ...

vue.js--v-show隐藏图片

vue.js–隐藏图片

vue.js--v-show隐藏图片相关推荐

最新文章

热门文章