目录
一、Vue3列表渲染
1. v-for的基本使用
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for的基本使用</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 遍历数组 -->
<h2>列表一</h2>
<ul>
<!-- (名称，索引值) in 数组 -->
<li v-for="(movie, index) in movies">{{index}}.{{movie}}</li>
</ul>
<!-- 遍历对象 -->
<h2>列表二</h2>
<ul>
<!-- (value, key, index) in 对象 -->
<li v-for="(value, key, index) in info">{{index}}.{{key}}: {{value}}</li>
</ul>
<!-- 遍历数字 -->
<ul>
<!-- (num, index) in 数字 -->
<li v-for="(num, index) in 10">{{index}}-{{num}}</li>
</ul>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
movies: ["test1", "test2", "test3"],
info: {
name: "zaker",
age: 18,
sex: "男"
}
}
},
methods: {
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
2. v-for和templat
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for和template</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- div渲染性能不好 -->
<ul>
<div v-for="(value, key) in info">
<li>{{value}}</li>
<li>{{key}}</li>
<hr>
</div>
</ul>
<ul>
<template v-for="(value, key) in info">
<li>{{value}}</li>
<li>{{key}}</li>
<hr>
</template>
</ul>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {
name: "ruiwiki",
age: 18,
height: 1.88
}
}
},
methods: {
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
3. 数组的修改方法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组的修改方法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>列表</h2>
<ul>
<li v-for="(movie, index) in movies">{{index}}.{{movie}}</li>
</ul>
<input type="text" v-model="newMovie">
<button @click="addMovie">添加</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
newMovie: "",
movies: [
"test1",
"test2",
"test3"
]
}
},
methods: {
addMovie() {
this.movies.push(this.newMovie);
console.log(this.newMovie);
this.newMovie = "";
console.log(this.newMovie);
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
4. key案例-插入元素
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>key案例-插入f元素</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<ul>
<li v-for="letter in letters">{{letter}}</li>
</ul>
<button @click="insertF">插入</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
newMovie: "",
letters: ['a', 'b', 'c', 'd']
}
},
methods: {
insertF() {
// splice('那个位置前面', '需不需要删除0不删除，1删除', '插入数据')
this.letters.splice(2, 0, 'f');
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
