数据可视化5_Vue的使用

最新推荐文章于 2023-12-07 16:47:48 发布

niki__

最新推荐文章于 2023-12-07 16:47:48 发布

阅读量565

点赞数

分类专栏： python+人工智能学习文章标签： python vue.js

本文链接：https://blog.csdn.net/niki__/article/details/121459560

版权

python+人工智能学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

Vue的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态列表 - Vue.js</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background-color: #000;
			color: #fff;
		}
		#app {
			width: 40%;
			margin: 20px auto;
		}
		#fruits>li {
			width: 90%;
			height: 50px;
			background-color: #6ca;
			margin: 4px 0;
			text-align: center;
			font-size: 20px;
			list-style-type: none;
			line-height: 50px;
		}
		#fruits+div {
			margin-top: 20px;
		}
		#app>div>input[type=text] {
			width: 70%;
			height: 40px;
			color: #fff;
			border-radius: 8px;
			border: none;
			outline: none;
			font-size: 20px;
			text-align: center;
			vertical-align: middle;
			background-color: #999;
		}
		#ok {
			width: 19%;
			height: 40px;
			color: #fff;
			background-color: #a45;
			border: none;
			outline: none;
			font-size: 16px;
			vertical-align: middle;
		}
	</style>
</head>
<body>

	<div id="app">
		<ul id="fruits">
			<li v-for="fruit in fruits">{{ fruit }}</li>
		</ul>
		<div>
			<input type="text">
			<button id="ok">确定</button>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
	<script>
		//app.fruits.unshift('芒果')在前面插入
		// app.fruits.push('山竹')在后面插入
		let app = new Vue({
			el:'#app',
			data:{
				fruits:['苹果','橘子','香蕉']
			}
		})

	</script>
</body>
</html>

niki__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化5_Vue的使用

Vue的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态列表 - Vue.js</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; color: #fff; } #app {
复制链接

扫一扫

专栏目录