Vue小项目之路由及表格相关操作

Vue小项目之路由及表格相关操作

vuecli搭建

一、效果演示

二、代码

这个项目用了许多vue的相关功能

App.vue

略去样式

<template>
  <div id="app">
    <Click :msgs="msgs"></Click>
    <router-link to="/Hello" tag="h3">hello</router-link>
    <router-link to="/Table" tag="h3">Table</router-link>

    <h3 align="center">{{msg}}</h3>
    <router-view></router-view>
  </div>
</template>

<script>
import Click from "./components/Click";
export default {
  name: 'App',
  components: {Click},
  data(){
    return{
      msg:"The VueCli",
      msgs:"<h2 align='center'>点击下方相关链接，获得页面展示</h2>",
      msgss:"In it"
    }
  }
}
</script>

index.js

略去模块导入

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/Hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
     path:"/Table" ,
      name:"table",
      component:Table
    }
  ],
  mode:"history"
})

table.vue

<template>
    <div>
      <h1 align="center" v-if="books.length">{{msg}}</h1>
      <table v-if="books.length" class="table table-striped table-bordered text-capitalize">
        <tr>
          <th>name</th>
          <th>price</th>
          <th>sum</th>
          <th>操作</th>
        </tr>
        <tr v-for="(book,index) in books">
          <td>{{book.name}}</td>
          <td>{{book.price}}</td>
          <td>{{book.sum}}</td>
          <td><button @click="del(index)" class="btn-warning">删除</button></td>
        </tr>
      </table>
    </div>
</template>

<script>
    export default {
        name: "table",
      data(){
          return{
            books:[{
              name:"java",price:118,sum:10},
              {name:"python",price:90,sum:7},
              {name:"php",price:83,sum:3}
            ],
            msg:"The Book of This Home!!!",
            del(index){
              this.books.splice(index,1)
            }
          }
      },
    }
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <img src="../assets/logo.png">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Click.vue

<template>
    <div>
      <div v-html="msgs"></div>
      <slot>{{msgss}}</slot>
    </div>

</template>

<script>
    export default {
        name: "Click",
      props:{
        msgs:String
      },
        data(){
          return{
            msgss:this.$parent.msgss
          }
        }
    }