x-html HTML绑定 #

<div x-html="表达式"></div>

<div x-data="{ content: '<strong>Bold</strong> and <em>italic</em>' }">
    <div x-html="content"></div>
</div>

<div x-data="{
    items: ['Apple', 'Banana', 'Orange'],
    get listHtml() {
        return '<ul>' + this.items.map(i => `<li>${i}</li>`).join('') + '</ul>'
    }
}">
    <div x-html="listHtml"></div>
</div>

<div x-data="{
    content: '<h2>标题</h2><p>段落内容</p>'
}">
    <div class="preview" x-html="content"></div>
</div>

<div x-data="{ html: '<strong>Bold</strong>' }">
    <p>x-text: <span x-text="html"></span></p>
    <p>x-html: <span x-html="html"></span></p>
</div>

x-text: <strong>Bold</strong>
x-html: Bold（加粗显示）

<div x-data="{ userInput: '' }">
    <input x-model="userInput">
    <div x-html="userInput"></div>
</div>

<div x-data="{ userInput: '' }">
    <input x-model="userInput">
    <div x-text="userInput"></div>
</div>

<div x-data="{
    trustedContent: '<p>来自可信源的内容</p>'
}">
    <div x-html="trustedContent"></div>
</div>

<div x-data="{
    sanitize(html) {
        const div = document.createElement('div')
        div.textContent = html
        return div.innerHTML
    }
}">
    <div x-html="sanitize(userContent)"></div>
</div>

<div x-data="{
    article: {
        title: '文章标题',
        content: `
            <h2>章节一</h2>
            <p>这是段落内容。</p>
            <ul>
                <li>列表项 1</li>
                <li>列表项 2</li>
            </ul>
        `
    }
}">
    <h1 x-text="article.title"></h1>
    <article x-html="article.content"></article>
</div>

<div x-data="{
    markdown: '# Hello\n\nThis is **bold** text.',
    renderedHtml: '',
    async renderMarkdown() {
        const response = await fetch('/api/markdown', {
            method: 'POST',
            body: JSON.stringify({ markdown: this.markdown })
        })
        this.renderedHtml = await response.text()
    }
}" x-init="renderMarkdown()">
    <textarea x-model="markdown" @input="renderMarkdown()"></textarea>
    <div class="preview" x-html="renderedHtml"></div>
</div>

<div x-data="{
    icons: {
        home: '<svg>...</svg>',
        user: '<svg>...</svg>',
        settings: '<svg>...</svg>'
    }
}">
    <span x-html="icons.home"></span>
    <span x-html="icons.user"></span>
    <span x-html="icons.settings"></span>
</div>

<div x-data="{
    notifications: [
        { type: 'success', message: '<strong>成功!</strong> 操作已完成' },
        { type: 'error', message: '<strong>错误!</strong> 操作失败' }
    ]
}">
    <template x-for="notification in notifications">
        <div :class="'alert alert-' + notification.type" x-html="notification.message"></div>
    </template>
</div>

<div x-data="{
    content: '',
    loading: false,
    async loadContent() {
        this.loading = true
        try {
            const res = await fetch('/api/content')
            this.content = await res.text()
        } finally {
            this.loading = false
        }
    }
}" x-init="loadContent()">
    <div x-show="loading">加载中...</div>
    <div x-show="!loading" x-html="content"></div>
</div>

<div x-data="{ html: '<span>New</span>' }">
    <p x-html="html">原有内容会被替换</p>
</div>

<div x-data="{ html: '<p>段落1</p><p>段落2</p>' }">
    <div x-html="html"></div>
</div>

<div x-data="{ html: '<span>内容</span>' }" class="text-red">
    <div x-html="html"></div>
</div>

<div x-data="{ html: '<button onclick=\"alert(1)\">Click</button>' }">
    <div x-html="html"></div>
</div>