루프를 위해 vuejs의 첫 번째 요소에 class="active"를 설정하는 방법
는ueuejsjsjs 우배 배배배배ue 목록을 목록을 추가하고 요. 추가하고 싶습니다.class="active"음음음음 뭇매하다
<div class="carousel-inner text-center " role="listbox">
<div class="item" v-for="sliderContent in sliderContents">
<h1>{{ sliderContent.title }}</h1>
<p v-html="sliderContent.paragraph"></p>
</div>
</div>
첫 번째 요소는 다음과 같습니다.
<div class="item active">
<h1>WELCOME TO CANVAS</h1>
<p>Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas</p>
</div>
데이터를 얻을 수 있어서 모든 게 완벽하게 잘 작동하고 있어요.
스크립트 코드는 다음과 같습니다.
<script>
export default{
data() {
return {
sliderContents: [
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
}
]
}
}
}
나 좀 도와 줘.
const TextComponent = {
template: `
<p>{{ text }}</p>
`,
props: ['text'],
};
new Vue({
components: {
TextComponent,
},
template: `
<div>
<text-component
v-for="(item, index) in items"
:class="{ 'active': index === 0 }"
:text="item.text">
</text-component>
</div>
`,
data: {
items: [
{ text: 'Foo' },
{ text: 'Bar' },
{ text: 'Baz' },
],
},
}).$mount('#app');.active {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>위는 문제 해결 방법을 보여 주는 단편입니다.개요는 다음과 같습니다.
v-forblocks 부 blocks blocks blocks blocks blocks blocks blocks blocks blocks blocks 。v-for는 현재 항목의 인덱스에 대한 옵션의 두 번째 인수도 지원합니다.
– https://vuejs.org/v2/guide/list.html#Basic-Usage
v-for의 인덱스를 하는 두 인수가 .
v-for="(item, index) in items"
가 건 '''''''active에서는 식 할 수 .index0이치노
:class="{ 'active': index === 0 }"
은 모든 입니다.index 이 0 을 합니다.activeclass).class(클래스)를 합니다.는 다음과 .
:class="{ 'active': index === 0 }"
은 '만들다'를 만드는 의 예시입니다.Bootstrap Tabs:
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" :class="{ 'active': index === 0 }" v-for="(value, index) in some_array" v-bind:key="index">
{{some_array[index]}}
</li>
</ul>
또, 복수의 클래스가 있는 경우는, 다음과 같이 혼재할 수 있습니다.
:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"
루프의 첫 번째 요소에 액티브 클래스를 배치하려면 기본적으로 VuejS를 통해 클래스를 프로그래밍 방식으로 제어하려고 합니다.
VueJS를 사용하면 앵커 태그의 클래스(예를 들어 li 태그일 수도 있음)를 li 요소의 인덱스에 직접 바인드할 수 있으므로 인덱스에 바인드된 vuejs 변수가 변경되면 클래스도 변경됩니다.자세한 내용은 다음 두 링크를 참조하십시오.
이것이 솔루션의 핵심입니다.
:class="{current:i == current}
아래 바이올린과 블로그 형식으로 li 요소의 클래스를 vuejs에서 동적으로 제어하는 방법을 설명하는 다른 게시물을 이용할 수 있습니다.
https://jsfiddle.net/Herteby/kpkcfcdw/
https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/
언급URL : https://stackoverflow.com/questions/42487711/how-to-put-class-active-to-first-element-in-vuejs-for-loop
'source' 카테고리의 다른 글
| 다운로드 RDS 스냅샷 (0) | 2022.11.28 |
|---|---|
| Java에서 null을 사용할 수 있는 이유는 무엇입니까? (0) | 2022.11.28 |
| Gradle을 사용할 때 과도적 종속성의 모든 인스턴스를 제외하려면 어떻게 해야 합니까? (0) | 2022.11.28 |
| JAVA_HOME은 JRE가 아닌 JDK를 가리켜야 합니다. (0) | 2022.11.28 |
| Python에서 백그라운드 프로세스를 시작하는 방법 (0) | 2022.11.28 |