Vue v-if、v-else、@click使用实例

最新推荐文章于 2023-08-17 21:59:26 发布

陈醋拌饭

最新推荐文章于 2023-08-17 21:59:26 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44167504/article/details/109296283

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Vue v-if、v-else、@click使用实例

根据loginType的值不同而切换显示的内容，动图显示：
在这里插入图片描述

html：

<div id="app">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    <button @click="input">写入</button>
  </div>

js：

 var app=new Vue({
    el:"#app",
    data:{
      loginType:'username'
    },
    methods:{
      input(){
        // loginType是否为username，true返回email，false返回username
        return this.loginType=this.loginType==='username'?'email':'username'
      }
    }
  })

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue指令2.0</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    <button @click="input">写入</button>
  </div>
</body>
<script>
  var app=new Vue({
    el:"#app",
    data:{
      loginType:'username'
    },
    methods:{
      input(){
        // loginType是否为username，true返回email，false返回username
        return this.loginType=this.loginType==='username'?'email':'username'
      }
    }
  })
</script>

</html>

陈醋拌饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue v-if、v-else、@click使用实例

Vue v-if、v-else、@click使用实例根据loginType的值不同而切换显示的内容，动图显示：html：<div id="app"> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input">
复制链接

扫一扫