RogerWorkPC
/
Vue_Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开始绑定样式的学习

Browse Source
mac_study
roger 2 years ago
parent 812a51eede
commit c3c4699362
1 changed files with 70 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      10_绑定样式/绑定样式.html

48
10_绑定样式/绑定样式.html
Unescape View File

@ -9,22 +9,28 @@
height: 100px; height: 100px;
border: 1px solid black; border: 1px solid black;
} }
.happy { .happy {
background-color: bisque; background-color: bisque;
} }
.sad { .sad {
background-color: blue; background-color: blue;
} }
.normal { .normal {
background-color: orange; background-color: orange;
} }
.test1 { .test1 {
background-color: blueviolet; background-color: blueviolet;
} }
.test2 { .test2 {
border-color: brown; border-color: brown;
border-width: medium; border-width: medium;
} }
.test3 { .test3 {
border-radius: 20px; border-radius: 20px;
} }
@ -34,27 +40,47 @@
<body> <body>
</body> </body>
<div id="root"> <div id="root">
<div class="basic" :class="style" @click="changeStyle">{{name}}</div> <div class="basic" :class="style" @click="changeStyle">{{name}}</div>
<div class="basic" :class="classArr" @click="changeStyle">{{name}}</div> <div class="basic" :class="classArr">{{name}}</div>
</div> <div class="basic" :class="classObj">{{name}}</div>
<script type="text/javascript"> <div class="basic" :style="styleObj">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ const vm = new Vue({
el: "#root", el: "#root",
data:{ data: {
name: '测试', name: '测试',
style: "normal", style: "normal",
classArr: ["test1", "test2", "test3"] classArr: ["test1", "test2", "test3"],
classObj: {
test1: true,
test2: true
},
styleObj: {
fontSize: '40px'
},
styleObj2: {
color: 'red'
},
styleArr: [{
fontSize: '40px'
},
{
color: 'red'
}
]
}, },
methods:{ methods: {
changeStyle(){ changeStyle() {
// this.style = "happy" // this.style = "happy"
const arr = ['happy', 'sad', 'normal'] const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random()*3) const index = Math.floor(Math.random() * 3)
this.style = arr[index] this.style = arr[index]
} }
} }
}) })
</script> </script>
</html> </html>
Write Preview
Loading…
Cancel
Save