Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

v-show的作用是显示或隐藏元素

原理是修改元素的display的值实现元素的隐藏或显示。

隐藏：

style="display: none;"

显示：

style

进行隐藏（显示）切换的时候，增加了过渡效果。

语法：

v-show="表达式"

其中表达式为true、false。

显示按钮：

<button v-show="true">v-show="true"</button>

隐藏按钮：

<button v-show="false">v-show="false"</button>

表达式1 > 0为true：

<button v-show="1 > 0">number1 > 0</button>

结果显示

表达式1 < 0为false：

<button v-show="1 > 0">number1 > 0</button>

结果隐藏

做1个小案例

实现3个功能：

（1）通过点击按钮，实现变更按钮文本内容；

（2）如果点击“显示”按钮，图片将显示；

（3）如果点击的是隐藏按钮，那么图片将隐藏。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue前端入门，v-show</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">

    <p><input type="button" :value="value" @click="btnShow"></p>
    <p>
        <img src="./001.jpg" width="300px" v-show="bool1" alt="">
    </p>
</div>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: "#app",
        data: {
            "text": "Vue前端入门，第9节 v-text的简单学习",
            "number1": 1,
            "bool1": true,
            "value": "隐藏"
        },
        methods: {
            btnShow: function () {
                if (this.value === "显示") {
                    this.value = "隐藏"
                    this.bool1 = true
                }else {
                    this.value = "显示"
                    this.bool1 = false
                }
            }
        }
    })
</script>
</body>
</html>

截图如下：

效果如下：

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Vue基础入门，第11节 v-show隐藏(显示)图片

做1个小案例