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

s2e29 no css classes, but still style

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-13 15:10:41 -04:00
parent a42d60c876
commit 73b096560c
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app.js
View File

@ -1,16 +1,14 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
attachRed: false, color: "gray",
attachGreen: false, width: 100
attachBlue: true,
color: "green"
}, },
computed:{ computed:{
divClasses(){ myStyle(){
return { return {
red: this.attachRed, backgroundColor: this.color,
blue: !this.attachRed width: this.width + "px"
} }
} }
} }

14
index.html
View File

@ -7,14 +7,12 @@
</head> </head>
<body> <body>
<div id='app'> <div id='app'>
<div class="demo" <div class="demo" :style="myStyle"></div>
@click="attachRed = !attachRed" <div class="demo"></div>
:class="{red: attachRed}" <div class="demo"></div>
></div> <hr>
<div class="demo" :class="divClasses"></div> <input type="text" v-model="color">
<div class="demo" :class="[color, {red: attachRed}]"></div> <input type="text" v-model="width">
<hr>
<input type="text" v-model="color">
</div> </div>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>