<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<h1>{{title}}</h1> <!--与下面的一样-->
<h1 v-text="title"></h1>
<h1 v-html="content"></h1>
<!--列表-->
<ul>
<li v-for="item in items" class="finished" v-on:click="toggleFinish(item)">{{item.label}}</li>
</ul>
<ul>
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" @click="toggleFinish(item)">{{item.label}}</li>
</ul>
<!--input-->
<input v-model="newItem" @keyup.enter="onEnter">
</div>
</template>
<script>
export default {
name: 'app',
data: function(){
return{
title:'this is a todo list',
content:'<span>you are very good, good for you</span>',
items:[
{
label:'coding',
isFinished:false
},
{
label:'walking',
isFinished:true
}
],
newItem:''
}
},
//方法集
methods:{
toggleFinish:function(item){
item.isFinished =!item.isFinished
},
onEnter:function(){
console.log(this.newItem)
this.newItem=''
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.finished{
text-decoration:underline;
}
</style>
VueJS(3)---基本文件格式
最新推荐文章于 2024-05-08 21:29:27 发布