数据()中的Vuejs Html标记/属性

Question

我需要做{{item.icon}拉作为html数据而不是字符串，但ı不知道如何做，是否有这样做，请帮助我

我有这样的代码：

    <div class="box my-5" v-for="(item, index) in items" :key="index" >
        <div class="innerBox">
            <router-link to="/ninethPage">
                <div  class="card Fcard d-flex  flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important">
                    <span v-html="icon"> </span>
                    <p>{{item.title}}</p>
                </div>
            </router-link>
            <router-view></router-view>
        </div>
    </div>
</div>


export default {
        el: '#app',
        data() {
            return {
                items: [
                    {title: 'Android', icon: <i class="fab fa-android mx-3 img-fluid" style="font-size: 1.5rem;" ></i>},
                    {title: 'IOS', icon: <i class="fab fa-apple mx-3 img-fluid" style="font-size: 1.5rem;" ></i>}
                ]
            }
        },
        components:{
            Header
        }
    }
`

Answer 1

icon: <i class=...是JSX语法，它创建一个元素，需要与呈现函数一起使用，而不是模板。应该是字符串，icon: '<i class=...'。

没有icon属性，它应该是<span v-html="item.icon">。

指定整个图标元素是不切实际的。如果只有<i>类不同，则它可以是icon: 'fa-android'，并与以下内容一起使用：

<i class="class="fab mx-3 img-fluid" style="font-size: 1.5rem" :class="item.icon"/>