File tree Expand file tree Collapse file tree 1 file changed +27
-12
lines changed Expand file tree Collapse file tree 1 file changed +27
-12
lines changed Original file line number Diff line number Diff line change 7
7
8
8
< test-component > </ test-component >
9
9
< static-component > </ static-component >
10
- < static-component > </ static-component >
11
- < static-component > </ static-component >
10
+ < static-component is-fahrenheit > </ static-component >
11
+
12
12
</ div >
13
13
14
14
15
15
16
- < script src ="https://unpkg.com /vue "> </ script >
16
+ < script src =". /vue.js "> </ script >
17
17
< script src ="../dist/vue-sap.js "> </ script >
18
18
< script >
19
19
Vue . component ( 'test-component' , {
26
26
27
27
28
28
Vue . component ( 'static-component' , {
29
+ props :{
30
+ isFahrenheit :{
31
+ type : Boolean ,
32
+ required : false ,
33
+ default : false
34
+ }
35
+ } ,
29
36
statics :{
30
- styleObj : { backgroundColor : '#aaa' }
37
+ temp : 0
31
38
} ,
32
- methods :{
33
- onClick ( ) {
34
- const so = this . styleObj ;
35
- if ( so . backgroundColor === 'red' ) {
36
- so . backgroundColor = 'blue' ;
37
- } else {
38
- so . backgroundColor = 'red' ;
39
+ computed :{
40
+ displayTemp :{
41
+ get ( ) {
42
+ if ( this . isFahrenheit ) {
43
+ return this . temp * 9 / 5 + 32 ;
44
+ } else {
45
+ return this . temp ;
46
+ }
47
+ } ,
48
+ set ( newValue ) {
49
+ if ( this . isFahrenheit ) {
50
+ this . temp = ( newValue - 32 ) * 5 / 9 ;
51
+ } else {
52
+ this . temp = newValue ;
53
+ }
39
54
}
40
55
}
41
56
} ,
42
- template : `<div :style="styleObj" @click="onClick" style="width:40px; height:40px; border-radius: 20px 20px;" ></div >`
57
+ template : `<label>{{isFahrenheit ? 'Fahrenheit' : 'Celsius'}}<input type="text" v-model="displayTemp" / ></label >`
43
58
} ) ;
44
59
45
60
new Vue ( {
You can’t perform that action at this time.
0 commit comments