vue.js补充

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绑定获取

猜你喜欢