v-forサイクル
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Titletitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<p v-for="(item,i) in datas" :key="i">
datas[ {{i}} ]--- {{item}}
p>
<p v-for="(user, i) in datas2" :key="user.id">
Id {{user.id}} {{user.name}} --- {{i}}
p>
<p v-for="(val,key) in user" :key="key">
{{key}} --- {{val}}
p>
<p v-for="cout in 10">
{{cout}}
p>
div>
body>
<script>
var vm = new Vue({
el: "#app",
data: {
datas: [1, 2, 4, "hello world", 'c'],
datas2: [{
id: 1001,
name: "zhangsan"
}, {
id: 1002,
name: "lisi"
}, {
id: 1003,
name: "wangwu"
}],
user: {
"id": "1001",
"name": "zhangsan",
"age": 12,
}
},
methods: {
}
})
script>
html>
v-infとv-showの違いv-infの特徴:毎回要素を作成したり削除したりします。高いスイッチング性能の消耗v-showの特徴があります。毎回DOMの削除と作成操作は行われません。元素のdisplayパターンを切り替えるだけです。より高い初期化レンダリング消費がある
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Titletitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="button" v-model:value="btnValue" @click="change">
<p v-if="flag">Hello world p>
<p v-show="flag">Hello world p>
div>
body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
btnValue: " ",
},
methods: {
change() {
this.flag = !this.flag;
if (this.flag) {
this.btnValue = " "
} else {
this.btnValue = " "
}
}
}
})
script>
html>