tyrel/learnin-some-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s3e34 conditions with if

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-13 22:50:29 -04:00
parent 8d5c1a2edf
commit c5776f88d5
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app.js
View File

@ -1,15 +1,6 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
color: "gray", show: true
width: 100
},
computed:{
myStyle(){
return {
backgroundColor: this.color,
width: this.width + "px"
}
}
} }
}); });

11
index.html
View File

@ -7,12 +7,11 @@
</head> </head>
<body> <body>
<div id='app'> <div id='app'>
<div class="demo" :style="{backgroundColor: color}"></div> <button type="button" name="button" @click="show = !show">Switch</button>
<div class="demo" :style="myStyle"></div>
<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div> <p v-if="show">You can see me</p>
<hr> <p v-else>Now you see me</p>
<input type="text" v-model="color"> <p>Do you also see me?</p>
<input type="text" v-model="width">
</div> </div>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>