Vue学习记录-v-if,v-else,登录切换

最新推荐文章于 2021-03-04 13:34:18 发布

orangecloudy

最新推荐文章于 2021-03-04 13:34:18 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/105674743

版权

<body>
  <div id="app">
   <h2 v-if="isShow">{{message}}</h2>
   <h1 v-else>world</h1>
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          isShow: true
        }
     })
  </script>
</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>
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          score: 99
        }
     })
  </script>

<div id="app">
    <h2>{{result}}</h2>
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          score: 99
        },
        computed: {
          result(){
            let show = '';
            if(this.score >= 90){
              show = "优秀"
            }else if(this.score >= 80){
              show = "良"
            }else if(this.score >= 60){
              show = "及格"
            }else{
              show = "不及格"
            }
            return show;
          }
        }
     })
  </script>

<div id="app">
    <span v-if="ifUser">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="用户名">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="bclick">切换类型</button>
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          ifUser: true
        },
        methods: {
          bclick(){
            this.ifUser = !this.ifUser;
          }
        }
     })
  </script>

orangecloudy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习记录-v-if,v-else,登录切换

<body> <div id="app"> <h2 v-if="isShow">{{message}}</h2> <h1 v-else>world</h1> </div> <script src="js/vue.js"> </script> <scri...
复制链接

扫一扫