vue组件切换—v-if和v-else切换两种状态

注意：通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换HTML代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti

何迟

5493人浏览 · 2018-09-28 17:05:08

何迟 · 2018-09-28 17:05:08 发布

注意：

通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <a href="#" @click.prevent="flag=true">登录</a>
          <a href="#" @click.prevent="flag=false">注册</a>
          
          <login v-if="flag"></login>
          <register v-else="flag"></register>
      </div>
      <!--通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换-->
      <script>
          Vue.component('login',{
              template:'<h3>登录</h3>'
          });
          Vue.component('register',{
              template:'<h3>注册</h3>'
          });
          
          
          var vm = new Vue({
              el:'#app',
              data:{
                  flag:true
              },
              method:{}
          });
      </script>
</body>
</html>

效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^