[Vue.js] 스타일의 귀속
5178 단어 Vue.js
개시하다
요즘js를 공부하고 있습니다.
현장에서 만든 소스를 봤지만 이해하지 못하고 고친 건 없어요
나는 초급편부터 공부하고 싶다.
이번 제목.
스타일 데이터 바인딩.
나는 어떤 동작을 할 때 특정한 색깔을 바꾸거나 위치를 이동할 것이라고 생각한다.
이것은 사용자가 행동을 취한 후의 행동을 반영하고 있음을 모두에게 알리기 위해서이다
좋은 방법이야.
만들어진 물건
버튼을 누르면 선택한 위치가 여기에 있습니다.라는 문자가 이동합니다.
출처
이번에는 버튼을 눌렀을 때 텍스트 위치를 바꾸는 프로그램입니다.
우선, 나는 >을 쓸 것이다.
v-bind 조작 스타일을 사용할 수 있습니다.
style02.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スタイルテスト</title>
</head>
<body>
<div id="app">
<div>
<button @click="setPosition('left')">左</button>
<button @click="setPosition('center')">真ん中</button>
<button @click="setPosition('right')">右</button>
<p v-bind:style="styleObject">{{msg1}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./style02.js"></script>
</body>
</html>
상술했어<p v-bind:style="styleObject">{{msg1}}</p>
부분
{color:activeColor,fontSize:fontSize・・・・>와 같이 직접 기술해도 될 것 같지만 대상으로 바꾸면 더 예뻐요.
style02.js
var app = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
textAlign: 'center',
fontSize: '13px',
background: 'black'
},
msg1: '選択した位置はここです。'
},
methods: {
setPosition : function(position) {
this.styleObject.textAlign = position;
}
}
});
총결산
Vue 인스턴스와 HTML의 템플릿 구문에 설명된 값이 바인딩됩니다.
데이터가 변경됨에 따라 DOM이 수립되면 바로 반영되고 화면이 그려질 때 대단하다.
시스템을 재가동하는 틀이 정말 대단하다는 걸 실감했어요.
Reference
이 문제에 관하여([Vue.js] 스타일의 귀속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hir0kazuS/items/d8f7970d8e278bfb55fd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
스타일 데이터 바인딩.
나는 어떤 동작을 할 때 특정한 색깔을 바꾸거나 위치를 이동할 것이라고 생각한다.
이것은 사용자가 행동을 취한 후의 행동을 반영하고 있음을 모두에게 알리기 위해서이다
좋은 방법이야.
만들어진 물건
버튼을 누르면 선택한 위치가 여기에 있습니다.라는 문자가 이동합니다.
출처
이번에는 버튼을 눌렀을 때 텍스트 위치를 바꾸는 프로그램입니다.
우선, 나는 >을 쓸 것이다.
v-bind 조작 스타일을 사용할 수 있습니다.
style02.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スタイルテスト</title>
</head>
<body>
<div id="app">
<div>
<button @click="setPosition('left')">左</button>
<button @click="setPosition('center')">真ん中</button>
<button @click="setPosition('right')">右</button>
<p v-bind:style="styleObject">{{msg1}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./style02.js"></script>
</body>
</html>
상술했어<p v-bind:style="styleObject">{{msg1}}</p>
부분
{color:activeColor,fontSize:fontSize・・・・>와 같이 직접 기술해도 될 것 같지만 대상으로 바꾸면 더 예뻐요.
style02.js
var app = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
textAlign: 'center',
fontSize: '13px',
background: 'black'
},
msg1: '選択した位置はここです。'
},
methods: {
setPosition : function(position) {
this.styleObject.textAlign = position;
}
}
});
총결산
Vue 인스턴스와 HTML의 템플릿 구문에 설명된 값이 바인딩됩니다.
데이터가 변경됨에 따라 DOM이 수립되면 바로 반영되고 화면이 그려질 때 대단하다.
시스템을 재가동하는 틀이 정말 대단하다는 걸 실감했어요.
Reference
이 문제에 관하여([Vue.js] 스타일의 귀속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hir0kazuS/items/d8f7970d8e278bfb55fd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번에는 버튼을 눌렀을 때 텍스트 위치를 바꾸는 프로그램입니다.
우선, 나는 >을 쓸 것이다.
v-bind 조작 스타일을 사용할 수 있습니다.
style02.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スタイルテスト</title>
</head>
<body>
<div id="app">
<div>
<button @click="setPosition('left')">左</button>
<button @click="setPosition('center')">真ん中</button>
<button @click="setPosition('right')">右</button>
<p v-bind:style="styleObject">{{msg1}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./style02.js"></script>
</body>
</html>
<p v-bind:style="styleObject">{{msg1}}</p>
style02.js
var app = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
textAlign: 'center',
fontSize: '13px',
background: 'black'
},
msg1: '選択した位置はここです。'
},
methods: {
setPosition : function(position) {
this.styleObject.textAlign = position;
}
}
});
총결산
Vue 인스턴스와 HTML의 템플릿 구문에 설명된 값이 바인딩됩니다.
데이터가 변경됨에 따라 DOM이 수립되면 바로 반영되고 화면이 그려질 때 대단하다.
시스템을 재가동하는 틀이 정말 대단하다는 걸 실감했어요.
Reference
이 문제에 관하여([Vue.js] 스타일의 귀속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hir0kazuS/items/d8f7970d8e278bfb55fd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
