vue列表和数组

2022-08-20 23:32:35 阅读：165 来源： 互联网

标签：vue assets sitefiles 文本 num 数组 images 列表 png

数组

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue列表和数组