vue.js自学(D7)

最新推荐文章于 2024-07-06 21:00:00 发布

放屁鮰鱼

最新推荐文章于 2024-07-06 21:00:00 发布

阅读量122

点赞数

分类专栏：笔记 Vue.js

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104508421

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Vue.js

13 篇文章 0 订阅

订阅专栏

06-条件判断

01-v-if

02-v-else-if

03-v-else（p32）

如果简单可以写在标签里，如果复杂写computed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 v-if="scroe>=90">优秀</h2>
    <h2 v-else-if="scroe>=80">良好</h2>
    <h2 v-else-if="scroe>=60">及格</h2>
    <h2 v-else>不及格</h2>
    <h2>{{result}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        message:'你好啊',
        scroe:99,
      },
      computed:{
        result(){
          let showMessage = '';
          if(this.scroe >= 90){
            showMessage = '优秀'
          }else if(this.scroe >= 80){
            showMessage = '良好'
          }else if(this.scroe >= 60){
            showMessage = '及格'
          }else{
            showMessage = '不及格'
          }
          return showMessage
        }
      }
    })
  </script>
</body>
</html>

04-登录切换小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <span v-if="isUser">
      <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="btnClick">切换输入类型</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        message:'你好啊',
        isUser:true
      },
      methods:{
        btnClick(){
          console.log("-------");
          this.isUser = !this.isUser;
        }
      }
    })
  </script>
</body>
</html>

05-用户登录小问题

虚拟DOM，vue内部会复用，解决方案是加入key，这样vue内部就不会复用了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <span v-if="isUser">
      <label for="username">用户账户</label>
      <input type="text" id="username" placeholder="用户账号" key="username">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>
    <button @click="btnClick">切换输入类型</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        message:'你好啊',
        isUser:true
      },
      methods:{
        btnClick(){
          console.log("-------");
          this.isUser = !this.isUser;
        }
      }
    })
  </script>
</body>
</html>

放屁鮰鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js自学(D7)

06-条件判断01-v-if02-v-else-if03-v-else（p32）如果简单可以写在标签里，如果复杂写computed<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...
复制链接

扫一扫

专栏目录