三，vue的基础语法之条件判断

最新推荐文章于 2023-04-19 10:06:05 发布

银角大王qaq

最新推荐文章于 2023-04-19 10:06:05 发布

阅读量377

点赞数

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

本文链接：https://blog.csdn.net/weixin_44731169/article/details/107378508

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue的条件指令和JavaScript的条件语句类似。vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件

v-if

v-if的原理
- v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
- 也就是根本没有不会有对应的标签出现在DOM中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3 v-if="isShow">
        <div>xiaojian1</div>
        <div>xiaojian2</div>
        <div>xiaojian3</div>
    </h3>
    {{message}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                isShow: false
            }
        })
</script>

</body>
</html>

v-if、v-else-if、v-else结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
    <h1>{{result}}</h1>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                score: 99
            },
            computed:{
               result(){
                  var showMessage= '';
                  if(this.score>=90){
                      showMessage='优秀'
                  }else if (this.score>=80){
                      showMessage='良好'
                  }else if (this.score>=60){
                      showMessage='及格'
                  } else{
                      showMessage='不及格'
                  }
                  return showMessage
               }
            }
        })
</script>

</body>
</html>

综合案例

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
        <label for="userName">用户账号</label>
        <input id="userName" type="text" placeholder="用户账号">
    </span>
    <sapn v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="email">
    </sapn>
    <button @click="btnClick">切换</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
               isUser: true
            },
        methods:{
            btnClick(){
                this.isUser = !this.isUser

            }
        }
        })
</script>

</body>
</html>

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
v-if和v-show对比
- v-if当条件为false时，压根不会有对应的元素在DOM中
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中-->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>

  <!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: false
    }
  })
</script>

</body>
</html>

银角大王qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三，vue的基础语法之条件判断

vue的条件指令和JavaScript的条件语句类似。vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件v-ifv-if的原理v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title<
复制链接

扫一扫