数据（）中的Vuejs Html标签/属性

Posted 2023-02-16

【中文标题】数据（）中的Vuejs Html标签/属性

【英文标题】：Vuejs Html tag / attribute in data()

【发布时间】：2022-01-14 03:32:22

【问题描述】：

我需要将 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
        
    
`

【问题讨论】：

:v-html="item.icon" ?

这行不通人<div class="card Fcard d-flex flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important"> <span :v-html="item.icon"> </span> <p>item.title</p> </div> 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>' ]

项目中的所有图标都应为字符串格式：icon: "<i>my-icon</i>"

我已经这样做了，没有错误但图标不显示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>' ]

检查开发工具中的元素，检查<i>...</i>是否存在于span

【参考方案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"/>