vue练习

<div>

</div>

<div>

</div>

<div>

</select>

</div>

<div>

</div>

<button @click="createNew()">创建新用户</button>

<div>

{{item.name}} {{item.age}} {{item.sex}} {{item.phone}} <button @click="del(index)">删除</button>

</p>

</div>

//vm 核心一数据驱动界面

var vm = new Vue({

el: '#app', //视图层

data: { //数据层

persons: [

{name:'zs',age:20,sex:'男',phone:'1890000'},

{name:'ls',age:30,sex:'男',phone:'1891234'},

{name:'ww',age:22,sex:'女',phone:'1763333'},

{name:'zl',age:30,sex:'男',phone:'1597655'}

newStudent: {name:'',age:0,sex:'男',phone:''}

methods:{

createNew: function(){

if(this.newStudent.name === ''){

alert('姓名不能为空')

return;

}

if(this.newStudent.age <= 0){

alert('年龄不能小于0')

return;

}

this.persons.unshift(this.newStudent)

this.newStudent = {name:'',age:0,sex:'男',phone:''}

del: function(index){

this.persons.splice(index,1)

}

})

</script>

巴特西