时间戳

首页 > 解决方案 > 通过单击复选框（Vue.js）切换 div

javascript - 通过单击复选框（Vue.js）切换 div

问题描述

我有一个身份验证页面，我有一个复选框。我的主要想法是切换表格，我的复选框说“已经有一个帐户”，如果它被点击我想显示注册表格，如果它未选中我想显示登录表格。

我遵循了这个例子，这就是我在我的标签中得到的：

<div id='#selector'>
<div class="container">
  <label class="bs-switch">
    Already have an account
    <input type="checkbox" v-model="checked">
    <span class="slider round"></span>
  </label>
  <div class="row" v-if="checked">
  </div>
</div>
</div>

我没有复制整个表单，它只是一个默认的引导登录页面。

在我的标签内：

import Vue from 'vue'

var app = new Vue({
  el: '#selector',
  data: {
    checked: false
  }
});

它确实显示了复选框，但没有显示我的登录卡。错误：

属性或方法“checked”未在实例上定义，但在渲染期间被引用。

和

“在 '!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0! ./验证.vue'

我错过了什么？

标签： javascriptvue.js

解决方案

好吧，我已经设法自己解决了。我不必导入 Vue 或创建新的 vue 元素。我刚刚使用了数据功能：

export default {


data: function() {
    return {
      checked: false
    }
  }
}

推荐阅读