vue（八）关于vue条件判断

最新推荐文章于 2024-07-25 07:15:00 发布

(ʃƪ ˘ ³˘)异瞳

最新推荐文章于 2024-07-25 07:15:00 发布

阅读量1.4k

点赞数 1

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_46536962/article/details/115934510

版权

本文介绍了Vue中用于条件判断的指令，包括v-if、v-else、v-else-if的使用，通过切换登录案例展示了如何实现条件切换，并讨论了v-show在性能优化上的考量，同时提到了清空input的操作。

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

关于vue条件判断

1.v-if

  <script src="../js/vue.js"></script>
    <div id="app">
        <h1 v-if="isShow">{
  {message}}</h1><!--当true时会显示false不会显示-->
        </div>
    <script>
        const app =new Vue({
    
            el:'#app',//用于挂载有管理的元素
            data:{
    //定义数据
                message:'你好，老表',//声明变量
                isShow:false
            }/*控制台app.isShow=true就会显示  */
        })
    </script>

2.v-else

   <script src="../js/vue.js"></script>
    <div id="app">
        <h1 v-if="isShow">{
  {message}}</h1><!--当true时会显示false不会显示-->
        <h1 v-else>{
  {tom}}</h1>
    </div>
    <script>
        const app =new Vue({
    
            el:'#app',//用于挂载有管理的元素
            data:{
    //定义数据
                message:'你好，老表',//声明变量
                isShow:false,
                tom