效果圖如下：
學習目前用到了v-bind，v-if，v-else，v-html插入子節點，v-for循環，v-model，v-on，filter過濾器，watch屬性監測等知識
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#app .change{
background: black;
color: white;
}
#app .rec{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div v-if="seen" v-bind:class="{'change':change}">test</div>
<a v-bind:href="url">4399小遊戲</a>
<div v-html="message"></div>
樣式改變:<input type="checkbox" name="" v-model="change"><br>
同步輸入:<input type="number" name="" v-model="text"><br>
將輸入的數乘以5:<br>{{text | five}}<br>
<div v-if="panduan()">您輸的數字爲偶數</div>
<div v-else>您輸的數字不爲偶數</div>
<button v-on:click="btn_click">按鈕</button>
<ul>
<li v-for="fruit in fruits">
{{fruit}}
</li>
</ul>
<input type="text" name="" v-model="kmH">km/h<br>
<input type="text" name="" v-model="mS">m/s<br>
<div id="result"></div>
請輸入顏色:<input type="text" name="" v-model="color">
<div class="rec" v-bind:style="{background:color}"></div>
</div>
<script type="text/javascript">
let a=new Vue({
el:"#app",
data:{
seen:true,
url:"http://www.4399.com/",
message:"<h1>Oh interesting?</h1>",
change:false,
text:null,
fruits:["蘋果","橘子","西瓜"],
kmH:0,
mS:0,
show:true,
color:null
},
methods:{
btn_click(){
alert(this.text);
},
panduan(){
return parseInt(this.text)%2==0;
}
},
//過濾器
filters:{
five(value){
if (!value) return " ";
return parseInt(value)*5;
}
},
//對屬性進行監聽
watch:{
kmH(val){
this.kmH=val,
this.mS=val/3.6;
},
mS(val){
this.mS=val,
this.kmH=val*3.6;
}
}
})
a.$watch("kmH",function(newval,old){
document.getElementById('result').innerHTML=`原先的值爲:${old},新的值爲:${newval}`;
});
</script>
</body>
</html>