Vuejs Html data() 中的标签/属性

Question

我需要做 {{item.icon}} pull 作为 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 语法，需要与 render 函数一起使用，而不是模板。它应该是一个字符串，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"/>

Vuejs Html data() 中的标签/属性

Vuejs Html tag / attribute in data()

vue.js

vuejs2