50 lines
1.0 KiB
HTML
50 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<div class="app">
|
|
<div>
|
|
{{eee}}
|
|
</div>
|
|
<input v-model="ertr" type="text">
|
|
<input v-model="ertr" type="text">
|
|
<div> {{ertr}}</div>
|
|
<div @click="say()">点我</div>
|
|
|
|
<div v-if="id">
|
|
<div>显示大图</div>
|
|
</div>
|
|
<div v-else>
|
|
<div>显示小图</div>
|
|
</div>
|
|
<div v-for="(v,i) in dd" :key="dd.id">
|
|
{{v.id}} {{v.name}}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
|
<script>
|
|
let vm =new Vue({
|
|
el:".app",
|
|
data:{
|
|
eee:"傻逼魏书正",
|
|
ertr:"我的",
|
|
id:true,
|
|
dd:[
|
|
{ id:1, name:"小狗"},
|
|
{ id:2, name:"大狗"},
|
|
{ id:3, name:"老狗"},
|
|
{ id:4, name:"母狗"}
|
|
]
|
|
},
|
|
methods: {
|
|
|
|
say(){
|
|
alert("傻逼")
|
|
},
|
|
|
|
|
|
}
|
|
})//生命周期 学
|
|
</script>
|
|
</html> |