网站跳转微信链接,查看域名注册信息,中国公司排行榜前十名,邯郸网站设计开发公司概述
v-show用于实现组件的显示和隐藏#xff0c;和v-if单独使用的时候有点类似。不同的是#xff0c;v-if会直接移除dom元素#xff0c;而v-show只是让dom元素隐藏#xff0c;而不会移除。
在实际开发中#xff0c;v-show也经常被用到#xff0c;需要重点掌握。
基本…概述
v-show用于实现组件的显示和隐藏和v-if单独使用的时候有点类似。不同的是v-if会直接移除dom元素而v-show只是让dom元素隐藏而不会移除。
在实际开发中v-show也经常被用到需要重点掌握。
基本用法
我们创建src/components/Demo13.vue在这个组件中我们要
1通过两个按钮切换isShow的布尔值2根据isShow的布尔值控制是否显示“我是通过v-show控制的内容”
代码如下
script setup
import {ref} from vue;const isShow ref(true)
/script
templatediv v-showisShowv-show控制的内容/divhrdivh3{{ isShow }}/h3button clickisShowtrue显示/buttonbutton clickisShowfalse隐藏/button/div
/template接着我们修改src/App.vue引入Demo13.vue并进行渲染
script setup
import Demo from ./components/Demo13.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/template然后我们浏览器访问http://localhost:5173/ 完整代码
package.json
{name: hello,private: true,version: 0.1.0,type: module,scripts: {dev: vite,build: vite build},dependencies: {vue: ^3.3.8},devDependencies: {vitejs/plugin-vue: ^4.5.0,vite: ^5.0.0}
}vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
script setup
import Demo from ./components/Demo13.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/templatesrc/components/Demo13.vue
script setup
import {ref} from vue;const isShow ref(true)
/script
templatediv v-showisShowv-show控制的内容/divhrdivh3{{ isShow }}/h3button clickisShowtrue显示/buttonbutton clickisShowfalse隐藏/button/div
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
