首页 > 其他分享> > vue列表和数组

vue列表和数组

2022-08-20 23:32:35 作者：互联网

数组

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./js/v3.2.8/vue.global.prod.js"></script>
	<title>Document</title>
</head>

<body>
	<!--  -->
	<div id="app">
		<h1 v-bind:title="tit" v-text="msg" v-on:click="showdata"></h1>
		<button v-on:click="jianshao">-</button>
		<span v-text="num">0</span>
		<button v-on:click="zengjia">+</button>
		<button @click="qietu(1)">切换图片1</button>
		<button @click="qietu(2)">切图3</button>
		<img v-bind:src="mapsrc" alt="图片">
	</div>
	<script>
		// 如何操作文本、属性、事件
		Vue.createApp({
			data() {
				return {
					msg: "文本显示，图片切换和数组",
					tit: "文本绑定",
					num: "0",
					mapsrc: "/sitefiles/assets/images/video-clip.png",
					mapslist: [
						"/sitefiles/assets/images/audio-clip.png",
						"/sitefiles/assets/images/default_avatar.png",
						"/sitefiles/assets/images/loading.gif"
					]
				}
			},
			methods: {
				showdata() {
					alert("操作事件")
				},
				zengjia() {
					this.num++;
				},
				jianshao() {
					if (this.num > 0) {
						this.num--;
					}
				},
				qietu(i) {
					this.mapsrc = this.mapslist[i];
				}
			}
		}).mount("#app")
	</script>

</body>

</html>

标签：vue,assets,sitefiles,文本,num,数组,images,列表,png
来源： https://www.cnblogs.com/xiongwei/p/16609044.html