Vuejs 為元件傳遞資料
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id = "myApp">
<div>你的成績為：
<input type="text" v-model = "score"> //用v-model繫結，輸入分數，自動渲染結果
<p>{{score}}</p>
<test-result :score = "score"></test-result>
</div>
</div>
<script>
Vue.component('test-result',{
props:['score'],
template:'<div><strong>{{score}}分,{{testresult}}</strong></div>',
computed:{
testresult:function(){
var str = "";
if(this.score < 60)
str = "不及格";
else if(this.score < 90)
str = "合格";
else
str = "優秀";
return str;
}
}
});
var myApp = new Vue({
el:"#myApp",
data:{
score:99,
},
});
</script>
</body>
</html>