Vue.js의 v-bind로 html를 전달하고 싶어요.
7655 단어 Vue.js
문제
Title 구성 요소를 만들 때 벨트
<br>의 값을 전달하면 <br>마다 반영됩니다.
Title.vue
<template>
<div class="title">
<p class="title__lead__top">{{ top }}</p>
<h2 class="title__catch">{{ catchCopy }}</h2>
<p class="title__lead__bottom">
{{ bottom }}
</p>
</div>
</template>
<script>
export default {
name: "Title",
data() {
return {};
},
props: {
top: {
type: String,
require: false,
default: "top"
},
catchCopy: {
type: String,
require: true
},
bottom: {
type: String,
require: false,
default: "bottom"
}
}
};
</script>
<style scoped></style>
<Title
top="キャッチコピー説明(top)"
catch-copy="キャッチコピー<br>キャッチコピー02<br>キャッチコピー03"
bottom="キャッチコピー説明(bottom)"
></Title>
해결 방법
문자열을 직접 맡겼기 때문에 v-html 명령을 사용합니다
Title.vue
<template>
<div class="title">
<p class="title__lead__top">{{ top }}</p>
<h2 class="title__catch" v-html="catchCopy"></h2>
<p class="title__lead__bottom">
{{ bottom }}
</p>
</div>
</template>
<script>
export default {
name: "Title",
data() {
return {};
},
props: {
top: {
type: String,
require: false,
default: "top"
},
catchCopy: {
type: String,
require: true
},
bottom: {
type: String,
require: false,
default: "bottom"
}
}
};
</script>
<style scoped></style>
Reference
이 문제에 관하여(Vue.js의 v-bind로 html를 전달하고 싶어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ikiikinyusankin/items/53549c114e4abd89e493텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
