Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь Javascript хэлний нэг давуу тал. Хэрэглэгч талын дэлгэцийг css хэвүүд ашиглан хэвжүүлдэг ч тэдгээрийг динамикаар удирдах хэрэгцээ зайлшгүй гардаг. Хичээлээр хуудасны элементүүдийн хэвийг css классууд ашиглахгүйгээр элементийн бичлэгт динамикаар оруулахыг CSS классуудтай ажиллах хичээлийнхтэй төстэй
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Vue JS</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
margin: 40px;
}
.red {background: red;}
.blue {background: blue;}
.green {background: green;}
</style>
</head>
<body>
<div id="app">
<div class="circle" :style="{'background': color}"></div>
<div class="circle"></div>
<hr>
<input type="text" v-model="color">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: false,
color: 'blue'
}
})
</script>
</body>
</html>жишээн дээр авч үзье.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авах
тэгшитгэлийг бод.