# Firebase + 验证 Example > 这个例子使用 [Firebase](https://www.firebase.com/) 作为后台数据存储，并与客户端实时同步 (你可以在多个浏览器标签中打开它)。另外，它使用计算属性实时校验，并且在添加/删除项目时触发 CSS 过渡效果。  html ``` <div id="app"> <ul> <li class="user" v-for="user in users" transition> <span>{{user.name}} - {{user.email}}</span> <button v-on:click="removeUser(user)">X</button> </li> </ul> <form id="form" v-on:submit.prevent="addUser"> <input v-model="newUser.name"> <input v-model="newUser.email"> <input type="submit" value="Add User"> </form> <ul class="errors"> <li v-show="!validation.name">Name cannot be empty.</li> <li v-show="!validation.email">Please provide a valid email address.</li> </ul> </div> ``` js ``` var baseURL = 'https://vue-demo.firebaseIO.com/' var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ /** * Setup firebase sync */ var Users = new Firebase(baseURL + 'users') Users.on('child_added', function (snapshot) { var item = snapshot.val() item.id = snapshot.key() app.users.push(item) }) Users.on('child_removed', function (snapshot) { var id = snapshot.key() app.users.some(function (user) { if (user.id === id) { app.users.$remove(user) return true } }) }) /** * Create Vue app */ var app = new Vue({ // element to mount to el: '#app', // initial data data: { users: [], newUser: { name: '', email: '' } }, // computed property for form validation state computed: { validation: function () { return { name: !!this.newUser.name.trim(), email: emailRE.test(this.newUser.email) } }, isValid: function () { var validation = this.validation return Object.keys(validation).every(function (key) { return validation[key] }) } }, // methods methods: { addUser: function () { if (this.isValid) { Users.push(this.newUser) this.newUser.name = '' this.newUser.email = '' } }, removeUser: function (user) { new Firebase(baseURL + 'users/' + user.id).remove() } } }) ``` css ``` body { font-family: Helvetica, Arial, sans-serif; } ul { padding: 0; } .user { height: 30px; line-height: 30px; padding: 10px; border-top: 1px solid #eee; overflow: hidden; transition: all .25s ease; } .user:last-child { border-bottom: 1px solid #eee; } .v-enter, .v-leave { height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } .errors { color: #f00; } ```