1.name是什么,调用的标签名就是name名
2.对于p标签的内容也可以写成<p v-text="sendmessage"></p>
3.placeholder:placeholder 属性提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
4.之前我们讲过出栈,也就是删除一个数组是用pop(),现在来讲讲添加进入数组push()用法
首先附上User.vue代码
<template>
<div class="user">
<h1>user hello</h1>
<ul>
<li v-for="user in user" >
<h2>{{ user.name }}</h2>
<h3>{{ user.email }}</h3>
<button v-on:click="del(user)">del</button>
</li>
<form v-on:submit="adduser">
<input type="text" v-model="newuser.name" placeholder="enter name">
<input type="text" v-model="newuser.email" placeholder="enter email">
<input type="submit" >
</form>
<button v-on:click="deleteuser">删除</button>
</ul>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
newuser:{},
user:[
/*{name:"111",email:"111"},
{name:"222",email:"111"},
{name:"333",email:"111"},*/
]
}
},
methods:{
deleteuser:function(){
this.user.pop();
},
adduser:function(e){
this.user.push({
name:this.newuser.name,
email:this.newuser.email
});
e.preventDefault();
},
del:function(user){
this.user.splice(this.user.indexOf(user),1);
}
},
created(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{this.user=data.body;})
}
}
</script>
<style scoped>
h1
{
color:green;
}
.user
{
width:100%;
max-width:1200px;
margin:40px auto;
padding:0 20px;
box-sizing:border-box;
}
ul{
display:flex;
flex-wrap:wrap;
list-style-type:none;
padding:0;
}
li
{
flex-grow:2;
flex-basis:200px;
text-align:center;
padding:30px;
border:solid 1px black;
margin:10px;
}
</style>
设置一个提交的表单,里面对应的数据是newuser的数据
<form v-on:submit="adduser">
<input type="text" v-model="newuser.name" placeholder="enter name">
<input type="text" v-model="newuser.email" placeholder="enter email">
<input type="submit" >
</form>
然后我们在data里面给一个newuser,但是不需要赋值
newuser:{},
创建adduser函数
adduser:function(e){
this.user.push({
name:this.newuser.name,
email:this.newuser.email
});
e.preventDefault();
}
},
e.preventDefault();
加了这个才可以保证页面不重新刷新这个网站,因为submit会刷新重新回到该页面
添加了之后
5.之前的删除,是删除最后一个,现在我们删除指定的一个,所以要把它的对象user传过去
<button v-on:click="del(user)">del</button>
函数
del:function(user){
this.user.splice(this.user.indexOf(user),1);
}
删除可用splice,indexOf是下标,删除长度为1,则可以删除对应的数据
点击del后
6.如果想要一个input type里面的值,可以直接在data定义一个值,然后用v-model绑定获取