vue指令：v-show

最新推荐文章于 2024-03-04 16:43:54 发布

星屿H

最新推荐文章于 2024-03-04 16:43:54 发布

阅读量117

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_48294048/article/details/120799650

版权

本文通过一个简单的HTML示例展示了Vue.js的v-show指令如何根据表达式的真假值来显示或隐藏元素。例子中包含了不同类型的真值和假值，以及使用v-show控制元素显示的交互功能。同时，还演示了如何在Vue实例中通过方法切换元素的显示状态。

摘要由CSDN通过智能技术生成

注意：代码所需vue可以通过npm i vue --save下载，然后引入即可

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3 v-show="true">天道酬勤</h3>
        <h3 v-show="false">商道酬信</h3>
        <h3 v-show="'false'">人道酬善</h3>
        <h3 v-show="1">哈哈哈哈</h3>
        <h3 v-show="0