Vue.js 기초 학습 의 class 와 스타일 바 인 딩
<html>
<head>
<meta charset="utf-8">
<title>Vue test</title>
<style type="text/css">
body {font-family: Verdana;}
p { font-family: Times, "Times New Roman", serif;}
.static.active {color: green; font-size: 35px;}
div.text-danger {color: red;font-size: 25px;}
div.active {color: blue;font-family: Verdana;}
</style>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
<p>class property set.</p>
</div>
<div id="app3"
v-bind:class="[activeClass,errorClass]">
<p>group class property set.</p>
</div>
<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">
<p> </p>
</div>
<div id="app5">
<my-component v-bind:class="{ active: isActive }"></my-component>
</div>
<div id="app6">
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> </p>
<p v-bind:style="styleObject"> </p>
</div>
<script>
Vue.component('todo-item', {
template: '<p>todo test.</p>'
})
//
var app = new Vue({
el: '#app'
})
// Vue class
var app2 = new Vue({
el: '.static',
data: {
isActive: false,
hasError: true
}
})
// class ( ， text-danger color )
var app3 = new Vue({
el: '#app3',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
var app4 = new Vue({
el: '#app4',
data: {
isActive: true
}
})
Vue.component('my-component',{
template: '<p class="static"> </p>'
})
var app5 = new Vue({
el: '#app5',
data: {
isActive: true
}
})
//
var app6 = new Vue({
el: '#app6',
data: {
activeColor: '#FF00FF',
fontSize: 30,
styleObject: {
color: '#585858',
fontSize: '25px'
}
}
})
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
