vue列表和数组
数组
<!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>
数组
<!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="图片">
<ul>
<li v-for="item in lists">{{item}}</li>
</ul>
<button v-for="item,index in mapslist" @click="qietu(index)">{{index+1}}</button>
</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"
],
lists: ["qqqq", "22222", "哈哈", "4"]
}
},
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>
浙公网安备 33010602011771号