Vue基础习题

最新推荐文章于 2024-12-30 21:42:29 发布

Hydra.

最新推荐文章于 2024-12-30 21:42:29 发布

阅读量6.2k

点赞数 4

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40657585/article/details/102695098

版权

本文通过两个实战示例介绍Vue的基础应用：1.实现微博发布功能，包括点击按钮将文本框内容渲染至页面及点击红X删除内容。2.展示商品增加删除功能，点击增加按钮将商品详情添加至表格，点击删除可移除相应商品信息。

摘要由CSDN通过智能技术生成

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>{<