vue实现一个增删改查crud操作示例代码
代码语言：html
所属分类：表格
代码描述：vue实现一个增删改查crud操作示例代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
.logo {
width: 50px;
float: left;
margin-right: 15px;
}
.form-group {
max-width: 500px;
}
.actions {
padding: 10px 0;
}
.glyphicon-euro {
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<header class="page-header">
<div class="branding">
<img src="//repo.bfw.wiki/bfwrepo/image/60a850a718ba8.png" alt="Logo" title="Home page" class="logo" />
<h1>Vue.js 创建列表实例</h1>
</div>
</header>
<div class="alert alert-warning">
本示例是用vue1来实现的
</div>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="product-list">
<div class="actions">
<a class="btn btn-default" v-link="{path: '/add-product'}">
<span class="glyphicon glyphicon-plus"></span>
添加产品
</a>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">产品检索</label>
<input v-model="searchKey" class="form-control" id="search-element" requred />
</div>
</div>
<table class="table">
<thead>
<tr>
<th>名称</th>
<th>描述</th>
<th>价格</th>
<th class="col-sm-2">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products | filterBy searchKey in 'name'">
<td>
<a v-link="{name: 'product', params: {product_id: product.id}}">{{ product.name }}</a>
</td>
<td>{{ product.description }}</td>
<td>
{{ product.price }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<a class="btn btn-warning btn-xs" v-link="{name: 'product-edit', params: {product_id: product.id}}">Edit</a>
<a class="btn btn-danger btn-xs" v-link="{name: 'product-delete', params: {product_id: product.id}}">Delete</a>
</td>
</tr>
</tbody>
</table>
</template>
<template id="add-product">
<h2>添加新产品</h2>
<form v-on:submit="createProduct">
<div class="form-group">
<label for="add-name">名称</label>
<input class="form-control" id="add-name" v-model="product.name" required />
</div>
<div class="form-group">
<label for="add-description">描述</label>
<textarea class="form-control" id="add-description" rows="10" v-model="product.description"></textarea>
</div>
<div class="form-group">
<label for="add-price">价格, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-price" v-model="product.price" />
</div>
<button type="submit" class="btn btn-primary">创建</button>
<a v-link="'/'" class="btn btn-default">取消</a>
</form>
</template>
<template id="product">
<h2>{{ product.name }}</h2>
<b>Description: </b>
<div>
{{ product.description }}
</div>
<b>Price:</b>
<div>
{{ product.price }}<span class="glyphicon glyphicon-euro"></span>
</div>
<br />
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<a v-link="'/'">Backt to product list</a>
</template>
<template id="product-edit">
<h2>编辑产品</h2>
<form v-on:submit="updateProduct">
<div class="form-group">
<label for="edit-name">名称</label>
<input class="form-control" id="edit-name" v-model="product.name" required />
</div>
<div class="form-group">
<label for="edit-descrip.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0