使用v-if v-else发现没有执行

使用v-if v-else发现没有执行

最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-ifv-else指令的时候,相应的内容都出现了

初始代码:

<div v-if="Math.random > 0.5">
  " Math.random > 0.5 "
</div>
<div v-else>
  " Math.random <= 0.5 "
</div>

显示的结果:

 " Math.random > 0.5 "
" Math.random <= 0.5 " 

后来发现,我的这个是忘记了创建实例,每一个Vue应用都是应该创建实例的,所以修改后的代码如下:

    <div id="test">
        <div v-if="Math.random > 0.5">
           " Math.random > 0.5 "
        </div>
        <div v-else>
            " Math.random <= 0.5 "
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el : "#test"
        })
    </script>
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-ifv-else是Vue.js中的条件渲染指令。v-if用于根据条件是否为true来显示或隐藏元素。当条件为true时,v-if内部的元素会被渲染显示出来;当条件为false时,v-if内部的元素会被从DOM中移除。 v-else则是和v-if一起出现的,当v-if判断为true时,v-else执行;当v-if判断为false时,v-else执行使用v-else可以在条件不满足时显示其他内容。 另外,Vue.js还提供了v-else-if指令,用于在多个条件之间切换。v-else-if可以用来添加更多的条件判断,如果前面的if和else-if都不成立,则执行v-else的代码。 在页面加载时,v-ifv-else-if会根据条件来决定是否渲染相应的元素。如果条件不满足,v-ifv-else-if内部的元素会被加载然后再消失掉。如果需要解决这个问题,可以使用v-show指令代替v-if,v-show只是简单地根据条件控制元素的显示与隐藏,不会在DOM中添加或移除元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue中的v-ifv-else](https://blog.csdn.net/weixin_50357864/article/details/115259987)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [V-if V-else-if V-else 的用法](https://blog.csdn.net/DSs1206/article/details/119188757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue中 v-ifv-else-if页面加载出现闪现的问题及解决方法](https://download.csdn.net/download/weixin_38571603/12951097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值