<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="rain_flag">下雨</div>
<div v-else>不下雨</div>
<button @click="rain_flag=!rain_flag">切换</button>
<hr>
<div v-show="rain_flag">下雨</div>
<div v-show="!rain_flag">不下雨</div>
<hr>
<div v-for="(sam, index) in sams">{{sam + "-" + index}}</div>
<div v-for="(op, key) in ops">{{key + "-" + op}}</div>
<hr>
<input type="text" v-model.lazy.trim="sss">
<h1>{{sss}}</h1>
<input type="text" v-model.number="nnn">
<h1>{{nnn}}</h1>
<label><input type="radio" value="fale" v-model="sex">女</label>
<label><input type="radio" value="man" v-model="sex">男</label>
<h1>性别：{{sex}}</h1>
<!-- bug 演示-->
<div>ID: <input type="text" v-model="id"></div>
<div>NAME: <input type="text" v-model="name"></div>
<button @click="add1">添加1</button>
<button @click="add2">添加2</button>
<hr>
<ul>
<li v-for="list in listArr" :key="list.id">
<input type="checkbox">
{{list.id+'---'+list.name}}
</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
rain_flag : true,
sams: [1,3],
ops: {name:"haah",pp:"opi"},
sss: '',
nnn: '',
id: '',
name: '',
listArr: [
{id:1,name:"tom"},
{id:2,name:"baobao"}
],
sex:''
}
},
computed: {
},
methods: {
add1() {
this.listArr.push({id:this.id,name:this.name})
},
add2() {
this.listArr.unshift({id:this.id,name:this.name})
}
}
}).mount('#app')
</script>
</body>
</html>
浙公网安备 33010602011771号