Vue2.0不在支持在html和body上挂载vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='vue.js'></script>
</head>
<body>
<div id='app'>
{{message}}
</div>
<div id='app2' :title='message'>
{{message}}
</div>
<div id='app3' v-if="seen">
{{message}}
</div>
<div id="app4">
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
<div id="app5">
<p>{{message}}</p>
<button @click='reverseMessage()'>翻转</button>
</div>
<div id="app6">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'hello world'
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"you load this page on " + new Date()
}
})
var app3 = new Vue({
el:'#app3',
data:{
seen:true,
message:'hello Vue'
}
})
var app4 = new Vue({
el:"#app4",
data:{
todos:[
{text:'hello text'},
{text:"hello world"},
{text:"hello javascript"}
]
}
})
var app5 = new Vue({
el:"#app5",
data:{
message:'hello vue.js!'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
}
}
})
var app6 = new Vue({
el:"#app6",
data:{
message:"hello Vue"
}
})
</script>
</body>
</html>vue2.0Demo
最新推荐文章于 2024-02-03 20:50:46 发布
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
