1.实现微博发布功能：
- 发布微博点击“按钮”，把文本框内容渲染到页面下方。
- 点击红色“X”，删除当前条内容。
- 页面样式可以自定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布微博</title>
<script src="../../js/vue.js"></script>
<style>
li{
height: 50px;
width: 800px;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<textarea v-model="msg" style="width:400px; height:100px; "></textarea>
<button @click="add()" style="background-color: orange;">发布微博</button>
<ul>
<li v-for="(v,i) in article">
<p>{{v}}<span @click="del(i)">X</span></p>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
article:[
"这是第一条微博",
"这是第二条微博"
],
msg:''
},
methods:{
add:function(){
//unshift() 把一个元素添加到数组的开头，并返回数组的新长度。
this.article.unshift(this.msg);
},
del:function(i){
//splice() 删除第i个位置后的一个元素
this.article.splice(i,1);
}
}
});
</script>
</html>
2.实现商品增加删除功能
点击“增加商品”，把商品详情增加到下列表格
点击“删除”，可以删除该条信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="app">
商品名称：<input type="text" name="name" v-model="name" />
商品价格：<input type="text" name="price" v-model="price" />
<button @click="add()">增加商品</button>
<table border="1px">
<template v-for="(v,index) in goods">
<tr style="background-color: orange;" v-if="index==0">
<td v-for="t in title">{{t}}</td>
</tr>
<tr>
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td><span @click="del(index)">X</span></td>
</tr>
</template>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
title:[
'商品序号',
'商品名称',
'商品价格',
'删除商品'
],
goods:[
{name:'zhangsan',price:'18'},
{name:'wmx',price:'20'}
],
name:'',
price:''
},
methods:{
add:function(){
var str = {name:this.name,price:this.price};
this.goods.unshift(str);
},
del:function(i){
this.goods.splice(i,1);
}
}
});
</script>
</html>
版权声明：本文为qq_40657585原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。