写在Vue的第一次体验

1,348 阅读1分钟

写在Vue的第一次体验

本人纯前端小白,多年前在学校学过一点html,基本忘完

从周一装好Vue环境,到今天,看语法,看公司项目,都觉得无从下手。直到今天网上找到一个小demo下来改改,增加一点功能,不懂得地方问问大佬,遇到了一些语法概念,才感受了入门的感觉。 记录下此刻!开心~

We set sail from here

-kai


<template>
    <div>
      <h1 v-html="title"></h1>
      <input type="text" v-model="itemNew" v-on:keyup.enter="addNew"/>
      <ul>
        <li v-for="(item,xkindex) in items" :key="xkindex">
          <p>{{item.name}}</p>  <button @click="deteleIndex(xkindex)" class="btnn">删除</button>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name:'app',
  data(){
    return{
      title:'nba player inout tabless',
      items: [],
      itemNew:'',
    }
  },
  methods:{
    addNew:function(){
      this.items.push({
        name: this.itemNew,
        student: false
      });
      this.itemNew = null;
    },
    deteleIndex:function(xkindex){
      this.items.splice(xkindex,1)
    }
  },
}
</script>

<style scoped lang="less">
  .btnn{background: red;}
</style>