asp化妆品网站,网站的想法,个人网站设计策划书,手机小程序制作一、v-show 指令
作用: 根据真假值,切换元素的显示状态
二、代码演示
1、v-show 绑定判断条件后#xff0c;根据布尔值决定是否显示图片 不显示图片 代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /…一、v-show 指令
作用: 根据真假值,切换元素的显示状态
二、代码演示
1、v-show 绑定判断条件后根据布尔值决定是否显示图片 不显示图片 代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp!-- 根据布尔值判断是否显示图片 --img v-showisShow src./img/测试图片.jpeg //div/bodyscript srcjs/vue.min.js/scriptscriptvar Vm new Vue({el: #app,data: {// 定义显示状态isShow: false,},methods: {},});/script
/html 显示图片 代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp!-- 根据布尔值判断是否显示图片 --img v-showisShow src./img/测试图片.jpeg //div/bodyscript srcjs/vue.min.js/scriptscriptvar Vm new Vue({el: #app,data: {// 定义显示状态isShow: true,},methods: {},});/script
/html
2、添加按钮控制图片的显示状态 修改代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp!-- 添加按钮修改状态 --input typebutton value修改图片状态 clickchangeImgShow /!-- 根据布尔值判断是否显示图片 --img v-showisShow src./img/测试图片.jpeg /!-- img v-shownum 13 src./img/测试图片.jpeg / --/div/bodyscript srcjs/vue.min.js/scriptscriptvar Vm new Vue({el: #app,data: {// 定义显示状态isShow: true,num: 10,},methods: {changeImgShow: function () {//取反this.isShow !this.isShow;},},});/script
/html 测试结果 3、直接在 v-show 后跟上条件判断句 代码修改 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp!-- 添加按钮修改状态 --!-- input typebutton value修改图片状态 clickchangeImgShow / --!-- 根据布尔值判断是否显示图片 --!-- img v-showisShow src./img/测试图片.jpeg / --img v-shownum 13 src./img/测试图片.jpeg //div/bodyscript srcjs/vue.min.js/scriptscriptvar Vm new Vue({el: #app,data: {// 定义显示状态isShow: true,num: 10,},methods: {changeImgShow: function () {//取反this.isShow !this.isShow;},},});/script
/html
4、原理分析
使用示例中的按钮点击事件当点击按钮 查看浏览器代码显示的变化 图片显示: 图片消失:
对比可以看出vue在底层修改了img的属性实现这一功能。
