vue练习

<div id="app">

<div>

<span>姓名</span>

<input type="text" placeholder="请输入姓名" v-model="newStudent.name">

</div>

<div>

<span>年龄</span>

<input type="text" placeholder="请输入年龄" v-model="newStudent.age">

</div>

<div>

<span>性别</span>

<select v-model="newStudent.sex">

<option value="男">男</option>

<option value="女">女</option>

</select>

</div>

<div>

<span>电话</span>

<input type="text" placeholder="请输入姓名" v-model="newStudent.phone">

</div>

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

<div>

<p v-for="(item,index) in persons">

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

</p>

</div>

</div>

<script src="./vue.min.js"></script>

<script>

//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>