<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖書管理系統</title>
</head>
<body>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/vue.js" ></script>
<div id="app">
<h1>{{message}}</h1>
圖書編號：<input type="text" v-model="a"><br>
圖書名稱：<input type="text" v-model="b"><br>
圖書價格：<input type="text" v-model="c"><br>
出版社：<select v-model="d">
<option value="https://bbs.csdn.net/topics/text">高等教育出版社</option>
<option value="https://bbs.csdn.net/topics/text">人民郵電出版社</option>
<option value="https://bbs.csdn.net/topics/text">清華大學出版社</option>
</select>
<br>
<button @click="create">添加</button> <button @click="resetLoginForm">重置</button>
<br>
<table>
<thead>
<tr>
<th>圖書編號</th>
<th>圖書名稱</th>
<th>圖書價格</th>
<th>出版社</th>
<th>操作</th>
</tr>
<tr v-for="p in prop">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td>{{p.cbs}}</td>
<td><button @click="delect">洗掉</button><button @click="amend">修改</button></td>
</tr>
</thead>
</table>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"圖書管理系統",
prop:[{id:"1",name:"vue.js",price:"45",cbs:"高等出版社"},
{id:"2",name:"MySQL資料庫",price:"48",cbs:"人民郵電出版社"},
{id:"3",name:"Java基礎",price:"35",cbs:"清華大學出版社"}
],
a:'',
b:'',
c:'',
d:'',
},
methods:{
create:function(){
this.prop.push({id:this.a,name:this.b,price:this.c,cbs:this.d})
},
// resetLoginForm:function(){
//
// this.$refs.loginFormRef.resetFields()
// },
delect:function(index){
this.prop.splice(index,1);
},
// amend:function(){
// this.prop
// }
}
})
</script>
</body>
</html>
那些注釋起來的是我不會的函式，另外2個分別是添加和洗掉，我想求一下怎么創建自己想要的函式，
以及重置輸入框的函式，和修改的函式。謝謝
uj5u.com熱心網友回復：
求大神解答，謝謝uj5u.com熱心網友回復：
在methods里面直接寫
add(){
這里寫上內容
}
del(){
寫上內容
}
不需要冒號：
uj5u.com熱心網友回復：
方法在VUE的實體化物件中定義參考：https://www.runoob.com/vue2/vue-examples.html
簡單舉例如下：
<div id="main">
<!-- 激活的選單樣式為 active 類 -->
<!-- 為了阻止鏈接在點擊時跳轉，我們使用了 "prevent" 修飾符 (preventDefault 的簡稱)。 -->
<nav v-bind:class="active" v-on:click.prevent>
<!-- 當選單上的鏈接被點擊時，我們呼叫了 makeActive 方法, 該方法在 Vue 實體中創建。 -->
<a href="https://bbs.csdn.net/topics/#" class="home" v-on:click="makeActive('home')">Home</a>
<a href="https://bbs.csdn.net/topics/#" class="projects" v-on:click="makeActive('projects')">Projects</a>
<a href="https://bbs.csdn.net/topics/#" class="services" v-on:click="makeActive('services')">Services</a>
<a href="https://bbs.csdn.net/topics/#" class="contact" v-on:click="makeActive('contact')">Contact</a>
</nav>
<!-- 以下 "active" 變數會根據當前選中的值來自動變換 -->
<p>您選擇了 <b>{{active}} 選單</b></p>
</div>
<script>
// 創建一個新的 Vue 實體
var demo = new Vue({
// DOM 元素，掛載視圖模型
el: '#main',
// 定義屬性，并設定初始值
data: {
active: 'home'
},
// 點擊選單使用的函式
methods: {
makeActive: function(item){
// 模型改變，視圖會自動更新
this.active = item;
}
}
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/42308.html
標籤：HTML5
下一篇：請教證書問題