s6e92 components with data method
This commit is contained in:
parent
f0f9acb0eb
commit
74fccdfb14
|
@ -1,10 +1,13 @@
|
||||||
Vue.component('ts-cmp',{
|
Vue.component('ts-cmp', {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {status: 'Critical'};
|
||||||
status: "Critical!",
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
template: '<p> Server status {{ status }} </p>'
|
template: '<p> Server status {{ status }} <button @click="changeStatus">XXX</button></p>',
|
||||||
|
methods: {
|
||||||
|
changeStatus(){
|
||||||
|
this.status = 'Normal';
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var app = new Vue({
|
var app = new Vue({
|
||||||
|
|
|
@ -8,6 +8,8 @@
|
||||||
<body>
|
<body>
|
||||||
<div id='app'>
|
<div id='app'>
|
||||||
<ts-cmp></ts-cmp>
|
<ts-cmp></ts-cmp>
|
||||||
|
<hr>
|
||||||
|
<ts-cmp></ts-cmp>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='app'>
|
<div id='app'>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user