យើងសិក្សាអំពីការផ្លាស់ប្តូរ css blind ដោយយើង class នៃ css ទៅតាមយើងចង់បាន
:class
File style.css
.circle{
width: 200px;
height: 200px;
border-radius: 100%;
background-color: rgb(0, 216, 214);
text-align: center;
line-height: 200px;
font-size: 2em;
color: white;
}
.pink{
background-color: #f368e0;
}
file app.js
let vm = Vue.createApp({
data(){
return{
isPink: false
}
}
}).mount('#app')
file index.html
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="app">
<label><input type="checkbox" v-model="isPink"> Pink </label>
<div class="circle" :class="{pink: isPink}">Dul!</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</body>
</html>
ប្រើជាលក្ខណជា object
យើងប្រើបែបងាយស្រួល update data
<div id="app">
<label><input type="checkbox" v-model="isPink"> Pink </label>
<!-- Use func-->
<div class="circle" :class="circle_classes">Dul!</div>
</div>
យើងប្តូរមកដាក់ជា function circle_classes ហើយយើងត្រូវបានលុបសញ្ញានេះចេញ {}
let vm = Vue.createApp({
data(){
return{
isPink: false
}
},
computed:{
circle_classes(){
return{
pink: this.isPink
}
}
}
}).mount('#app')
នេះយើងប្រើ property computed
ការប្រើ option ក្នុងការប្តូរពណ៌អក្សរ
let vm = Vue.createApp({
data(){
return{
isPink: false,
selectColor: ''
}
},
computed:{
circle_classes(){
return{pink: this.isPink}
}
}
}).mount('#app')
<div id="app">
<label><input type="checkbox" v-model="isPink"> Pink </label>
<select v-model="selectColor">
<option value="">White</option>
<option value="txt_black"> Black</option>
<option value="txt_blue">Bue</option>
</select>
<div class="circle" :class="[circle_classes, selectColor]">Dul!</div>
</div>
.circle{
width: 200px;
height: 200px;
border-radius: 100%;
background-color: rgb(0, 216, 214);
text-align: center;
line-height: 200px;
font-size: 2em;
color: white;
}
.pink{
background-color: #f368e0;
}
.txt_black{
color: black;
}
.txt_blue{
color: blue;
}
:style
style blind គឺសម្រាប់ធ្វើការ update value នៃ css
<div id="app">
<label><input type="checkbox" v-model="isPink"> Pink </label>
<select v-model="selectColor">
<option value>White</option>
<option value="txt_black"> Black</option>
<option value="txt_blue">Bue</option>
</select>
<div class="circle"
:class="[circle_classes, selectColor]"
:style="{width: size +'px', height: size+'px',lineHeight: size+'px'}">Dul!</div>
<input type="number" v-model="size">
</div>
let vm = Vue.createApp({
data(){
return{
isPink: false,
selectColor: '',
size: '200'
}
},
computed:{
circle_classes(){
return{pink: this.isPink}
}
}
}).mount('#app')
multi style
នៅការមាន style ច្រើនយើងត្រូវប្រើជាទំរងជា array object
<div id="app">
<label><input type="checkbox" v-model="isPink"> Pink </label>
<select v-model="selectColor">
<option value>White</option>
<option value="txt_black"> Black</option>
<option value="txt_blue">Bue</option>
</select>
<div class="circle"
:class="[circle_classes, selectColor]"
:style="[
{width: size +'px', height: size+'px',lineHeight: size+'px'},
{transform: 'rotate(35deg)'}
]">Dul!</div>
<input type="number" v-model="size">
</div>
0 Comments