<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app2">
<span :title="message">11111111</span>
</div>
<div id="app3">
<span v-if="screen"> hi</span>
</div>
<div id="app4">
<ol>
<li v-for="todo in todos">{{ todo.text}}</li>
</ol>
</div>
<div id="app5">
{{ message }}
<button v-on:click="revermessage">click</button>
</div>
<div id="app6">
{{ message }}
<input v-model="message" value="hello 12321">
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello Vue!"
}
})
var app2=new Vue({
el:"#app2",
data:{
message:"页面家在于"+new Date().toLocaleString()
}
})
var app3=new Vue({
el:"#app3",
data:{
screen:false
}
})
var arr=[{"text":"111"},{"text":"2222"}];
var app4=new Vue({
el:"#app4",
data:{todos:arr}
})
var app5=new Vue({
el:"#app5",
data:{
message:"hello Vue!"
},
methods:{
revermessage:function(){
this.message="aaaaaa"+this.message
}
}
})
var app6=new Vue({
el:"#app6",
data:{
message:"21312321"
}
})
</script>
</html>