<!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">
<script src="https://unpkg.com/vue@next"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return{
counter:1
}
},
mounted(){
console.log('页面加载完成后-自动执行')
setInterval(() => {
this.counter += 1
}, 1000);
},
template:'<div>{{counter}}</div>'
}).mount("#app")
</script>
</html>
<!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">
<script src="https://unpkg.com/vue@next"></script>
<title>洗脚</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content:'',
setMeal:'真空套餐 学生套餐',
isShowMeal:false
}
},
methods:{
wecomeBtnClick(){
this.content="欢迎你的光临 贵宾一位!"
},
byeBtnClick(){
this.content="欢迎下次光临,真空套餐"
},
showOrhideBtnClick(){
this.isShowMeal=!this.isShowMeal
}
},
template: `<div>
<div>{{content}}</div>
<button v-on:click="wecomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal" >{{setMeal}}</div>
<button v-on:click="showOrhideBtnClick">显示/隐藏套餐</button>
</div>
</div>`
}).mount("#app")
</script>
</html>
<!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">
<script src="https://unpkg.com/vue@next"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
//---此处修改
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
//----此处修改
if(this.inputValue){
this.list.push(this.inputValue)
this.inputValue=''
}
}
},
template: `
<div>
<!--此处修改-->
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<li v-for="(item,index) of list">[{{index}}]{{item}}</li>
</ul>
</div>
`
}).mount("#app")
</script>
</html>
<!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">
<script src="https://unpkg.com/vue@next"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data() {
return {
//---此处修改
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
//----此处修改
if(this.inputValue){
this.list.push(this.inputValue)
this.inputValue=''
}
}
},
template: `
<div>
<my-title />
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<my-jiali
v-for="(item,index) of list"
v-bind:item="item"
v-bind:index="index"
/>
</ul>
</div>
`
})
app.component('my-title',{
template:'<h1 style="text-align:center">洗脚</h1>'
})
app.component('my-jiali',{
props:['item','index'],
template:`<li>[{{index}}]-{{item}}</li>`
})
app.mount('#app')
</script>
</html>