Vue学习第六天条件判断（v-on修饰符、v-if使用、v-show使用）

短命女 2022-12-18 04:53 159阅读 0赞

1：v-on修饰符

2：v-if的使用

3：v-if和v-else的使用

4：v-if和v-else-if的使用：

05：练习登录界面

06：登录界面出现的问题（DOM缓存）

07：v-show的使用

--------------------

# 1：v-on修饰符 #

.stop：停止冒泡

.prevent :阻止默认的原生事件

.xxx：监听某个键盘的点击

例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app">
      <div @click="divClick()">
        aaaaaaa
        
        <button @click.stop="buttonClick()">按钮</button>
    
        
        <form action="baidu" >
          <button type="submit" @click.prevent="submitClick">提交</button>
        </form>
    
        
        <input type="text" @keyup="keyUp"/>
        <input type="text" @keyup.enter="keyUp"/>
    
        
        <button @click.once="btn2Click">按钮2</button>
      </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
         },
        methods:{
          divClick(){
            console.log("divClick");
          },
          buttonClick(){
            console.log("buttonClick");
          },
          submitClick(){
            console.log("submitClick");
          },
          keyUp(){
            console.log("keyUp");
          },
          btn2Click(){
            console.log("触发一次按钮");
          }
        }
      })
    </script>
    </body>
    </html>

# 2：v-if的使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <div>
        <p v-if="score>=90">优秀</p>
        <p v-if="score<90 && score>=60">合格</p>
        <p v-if="score<60">不及格</p>
      </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
          score: 40
         }
      })
    </script>
    </body>
    </html>

# 3：v-if和v-else的使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
        <div>
          <p v-if="isFlag">帅</p>
          <p v-else>丑</p>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
          isFlag:true
         }
      })
    </script>
    </body>
    </html>

# 4：v-if和v-else-if的使用： #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <div>
         <p v-if="score>=90">优秀</p>
         <p v-else-if="score>=60 &&score<90">及格</p>
         <p v-else>不及格</p>
       </div>
    
      
      <div>
        <p>{
       {autoScore}}</p>
      </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          score: 80
         },
        computed:{
          autoScore(){
            let message="";
            if(this.score>=90){
              message="优秀"
            }else if(this.score>=60 && this.score<90){
              message="及格";
            }else{
              message="不及格";
            }
            return message;
          }
        }
      })
    </script>
    </body>
    </html>

# 05：练习登录界面 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
        
       {
       {LoginType}}
       <input type="text" :placeholder="LoginMessage" />
       <button @click="changeType">切换登录</button>
       <br>
       
       <div v-if="LoginType=='账号登录'">
         {
       {LoginType}}
         <input type="text" placeholder="请输入账号" />
         <button @click="changeType2">切换登录</button>
       </div>
       <div v-else>
         {
       {LoginType}}
         <input type="text" placeholder="请输入邮箱" />
         <button @click="changeType2">切换登录</button>
       </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          LoginType: '账号登录',
          LoginMessage: '请输入账号'
         },
        methods:{
          changeType(){
            let typeName=this.LoginType;
            console.log(typeName);
            if(typeName=='账号登录'){
              this.LoginType="邮箱登录";
              this.LoginMessage="请输出邮箱"
            }else{
              this.LoginType="账号登录";
              this.LoginMessage="请输入账号"
            }
          },
          changeType2(){
            let typeName=this.LoginType;
            if(typeName=='账号登录'){
              this.LoginType="邮箱登录";
            }else{
              this.LoginType="账号登录";
            }
          }
        }
      })
    </script>
    </body>
    </html>

# 06：登录界面出现的问题（DOM缓存） #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      
      <div v-if="LoginType=='账号登录'">
        {
       {LoginType}}
        <input type="text" placeholder="请输入账号" />
        
        <input type="text" placeholder="请输入账号" key="promiss" />
        <button @click="changeType2">切换登录</button>
      </div>
      <div v-else>
        {
       {LoginType}}
        <input type="text" placeholder="请输入邮箱" />
        
        <input type="text" placeholder="请输入邮箱" key="promiss2"/>
        <button @click="changeType2">切换登录</button>
      </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          LoginType: '账号登录',
          LoginMessage: '请输入账号'
        },
        methods:{
          changeType(){
            let typeName=this.LoginType;
            console.log(typeName);
            if(typeName=='账号登录'){
              this.LoginType="邮箱登录";
              this.LoginMessage="请输出邮箱"
            }else{
              this.LoginType="账号登录";
              this.LoginMessage="请输入账号"
            }
          },
          changeType2(){
            let typeName=this.LoginType;
            if(typeName=='账号登录'){
              this.LoginType="邮箱登录";
            }else{
              this.LoginType="账号登录";
            }
          }
        }
      })
    </script>
    </body>
    </html>

# 07：v-show的使用 #

v-if和v-show都是对其显示及隐藏。v-if是直接不会在页面上存在 ，v-show为false时，会加display:none的属性

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <p v-if="isShow" id="aaa">{
       {message}}</p>
      <p v-show="isShow" id="bbb">{
       {message}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
          isShow: true
         }
      })
    </script>
    </body>
    </html>