如何在 Vue.js 中嵌套 v-show 和 v-if？

Question

例如，网络应用程序将遵循以下步骤：

• 它从用户那里读取姓名，并返回一条消息。

• 检查输入的姓名是否是您的姓名。

• 如果名字是你的名字，输出消息'Awesome name!'

• 否则输出“不是我的名字”消息。

如何在 Vue.js 中使用 v-show 和 v-if 实现？

下面是示例代码，因此，如何使用v-show，让v-if只在满足条件时显示？

    <!-- Show if str is vue-->
    <p v-if="strName.toLowerCase() == 'henil'">Awesome Name!</p>
    <!-- else -->
    <p v-else>{{ strName }} is not my name!</p>
    </div>
    
    <!-- All Bootstrap plug-ins file -->
    <script src="js/bootstrap.bundle.min.js"></script>
    
    <!-- All VueJS -->
    <script src="js/vue.min.js"></script>
    
    <script type="text/javascript">
    //assigning variables
    var strName = '';
    //creating new Vue instance
    new Vue({
        el: '#app', //denotes where vue js app starts
        data:  {strName}//passing variables into vue app
    });

I am getting this output with above code

Answer 1

vue.js 似乎未在 dom 上加载，您必须在 html

中使用应用 ID 为 div

例如：

<div id="app">
    <input v-model="strName">
    <p v-if="strName.toLowerCase() == 'henil'">Awesome Name!</p>
    <p v-else>{{ strName }} is not my name!</p>
</div>

或

可能是你的代码没有运行在web服务器上，直接用浏览器打开本地文件，导致vue.js没有运行。

如何在 Vue.js 中嵌套 v-show 和 v-if？

How to nest v-show and v-if together in Vue.js?

javascript

vue.js

vue-component