<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<script src="vue.js"></script>
<title>Insert title here</title>
</head>
<html>
<head>
<meta charset="gbk">
<script src="vue.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title='message'>
鼠標懸停看到時間
</span>
</div>
<div id="app-3">
<p v-if="seen">
現在你看到我了!
</p>
</div>
<div id="app-4">
<ol>
<li v-for="obj in objects">
{{obj}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="tongYi">同義語句</button>
</div>
<div id="app-6">
</div>
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title='message'>
鼠標懸停看到時間
</span>
</div>
<div id="app-3">
<p v-if="seen">
現在你看到我了!
</p>
</div>
<div id="app-4">
<ol>
<li v-for="obj in objects">
{{obj}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="tongYi">同義語句</button>
</div>
<div id="app-6">
</div>
</body>
<script>
var vue = new Vue({
el:'#app',
data:{message:'holleWord'}
});
var vue2 = new Vue({
el:'#app-2',
data:{message:"現在時間："+new Date().toLocaleString()}
});
var vue3 = new Vue({
el:"#app-3",
data:{
seen:true
}
});
var vue4 = new Vue({
el:"#app-4",
data:{
objects:[
{text:'王競偉'},
{text:'王梓郡'},
{text:'王梓琪'}]
}
});
var vue5 = new Vue({
el:'#app-5',
data:{message:"我有兩個小棉襖！羨慕吧！"},
methods:{
tongYi:function(){
if(this.message == "我有兩個小棉襖！羨慕吧！"){
this.message = "羨慕吧，我有兩個小棉襖！";
}else{
this.message = "我有兩個小棉襖！羨慕吧！";
}
}
}
});
var vue6 = new Vue({
el:'#app-6',
template:"<div><input type='text' v-bind:value='setValue' :class='setValue'></input><br> {{setValue}} <input type='text' v-model='upValue'></input> <br> {{upValue}} </div>",
data:function(){
return {
setValue:"單向數據綁定",
upValue:"雙向數據綁定"
};
}
});
</script>
</html>
<script>
var vue = new Vue({
el:'#app',
data:{message:'holleWord'}
});
var vue2 = new Vue({
el:'#app-2',
data:{message:"現在時間："+new Date().toLocaleString()}
});
var vue3 = new Vue({
el:"#app-3",
data:{
seen:true
}
});
var vue4 = new Vue({
el:"#app-4",
data:{
objects:[
{text:'王競偉'},
{text:'王梓郡'},
{text:'王梓琪'}]
}
});
var vue5 = new Vue({
el:'#app-5',
data:{message:"我有兩個小棉襖！羨慕吧！"},
methods:{
tongYi:function(){
if(this.message == "我有兩個小棉襖！羨慕吧！"){
this.message = "羨慕吧，我有兩個小棉襖！";
}else{
this.message = "我有兩個小棉襖！羨慕吧！";
}
}
}
});
var vue6 = new Vue({
el:'#app-6',
template:"<div><input type='text' v-bind:value='setValue' :class='setValue'></input><br> {{setValue}} <input type='text' v-model='upValue'></input> <br> {{upValue}} </div>",
data:function(){
return {
setValue:"單向數據綁定",
upValue:"雙向數據綁定"
};
}
});
</script>
</html>