Vue.jsパーフェクトガイド-8.中間アレンジとスタイリング
6493 ワード
データのリンクスタイル
vue.jsインフラストラクチャのカリキュラムと書籍を学ぶ
src / view / NewsView.vue <template>
<div>
<p v-for="item in fetchedNews" v-bind:key="item.id"> // <--
<a v-bind:href="item.url"> // <--
{{ item.title }}
</a>
<small>{{ item.time_ago }} by {{ item.user }}</small>
</p>
</div>
</template>
<script>
import { mapGetters } from "vuex"; // <--
export default {
computed: {
...mapGetters(["fetchedNews"]),
},
created() {
this.$store.dispatch("FETCH_NEWS_LIST");
},
};
</script>
<style></style>v-bind:key="item.id"を増やしても間違いはないと改めて強調しました.import { mapGetters } from "vuex"も同様で、mapGetters以外に使用されないvuexに関する方法はimportに置かない限りエラーは発生しません.<**a v-bind:href="item.url"**>このコードには:が含まれている必要があります.純粋なHTMLとは異なり、vueで生成されたtemplateではリンクを削除することはできません.:のみを加える場合は、v-bindを省略することができる.
<small>{{ item.time_ago }} by {{ item.user }}</small>smallの形状は、aの枠よりも小さい.Reference
この問題について(Vue.jsパーフェクトガイド-8.中間アレンジとスタイリング), 我々は、より多くの情報をここで見つけました https://velog.io/@dragoocho/Vue.js-완벽-가이드-8.-중간정리-및-스타일링テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol