x-bind 属性绑定 #

<div x-bind:属性名="表达式"></div>

<div :属性名="表达式"></div>

<div x-data="{ id: 'my-element' }">
    <div :id="id">内容</div>
</div>

<div x-data="{ url: 'https://example.com' }">
    <a :href="url">访问链接</a>
</div>

<div x-data="{ imageUrl: 'https://example.com/image.jpg' }">
    <img :src="imageUrl" alt="图片">
</div>

<div x-data="{ tooltip: '这是提示文本' }">
    <button :title="tooltip">悬停查看提示</button>
</div>

<div x-data="{ isActive: true, hasError: false }">
    <div :class="{ active: isActive, 'text-danger': hasError }">
        内容
    </div>
</div>

<div x-data="{ 
    activeClass: 'active',
    errorClass: 'text-danger'
}">
    <div :class="[activeClass, errorClass]">内容</div>
</div>

<div x-data="{ isActive: true, errorClass: 'text-danger' }">
    <div :class="['base-class', { active: isActive }, errorClass]">
        内容
    </div>
</div>

<div x-data="{ status: 'success' }">
    <div :class="{
        'bg-green': status === 'success',
        'bg-red': status === 'error',
        'bg-yellow': status === 'warning'
    }">
        状态指示
    </div>
</div>

<div x-data="{ 
    textColor: 'red',
    fontSize: 16
}">
    <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
        样式文本
    </p>
</div>

<div x-data="{
    styles: {
        backgroundColor: 'lightblue',
        marginTop: '10px',
        padding: '20px'
    }
}">
    <div :style="styles">内容</div>
</div>

<div x-data="{
    baseStyles: { color: 'blue' },
    overrideStyles: { color: 'red', fontWeight: 'bold' }
}">
    <p :style="[baseStyles, overrideStyles]">文本</p>
</div>

<div x-data="{ isActive: true }">
    <button :style="{
        backgroundColor: isActive ? 'green' : 'gray',
        cursor: isActive ? 'pointer' : 'not-allowed'
    }">
        按钮
    </button>
</div>

<div x-data="{ isDisabled: true }">
    <button :disabled="isDisabled">按钮</button>
</div>

<div x-data="{ isChecked: true }">
    <input type="checkbox" :checked="isChecked">
</div>

<div x-data="{ isReadonly: true }">
    <input :readonly="isReadonly" value="只读内容">
</div>

<div x-data="{ isRequired: true }">
    <input :required="isRequired">
</div>

<div x-data="{ isHidden: false }">
    <div :hidden="isHidden">内容</div>
</div>

<div x-data="{
    attributeName: 'href',
    url: 'https://example.com'
}">
    <a :[attributeName]="url">链接</a>
</div>

<div x-data="{
    eventName: 'click',
    handler() { alert('Clicked!') }
}">
    <button @[eventName]="handler()">点击</button>
</div>

<div x-data="{
    links: [
        { text: '首页', url: '/' },
        { text: '关于', url: '/about' },
        { text: '联系', url: '/contact' }
    ]
}">
    <nav>
        <template x-for="link in links">
            <a :href="link.url" x-text="link.text"></a>
        </template>
    </nav>
</div>

<div x-data="{ activeTab: 'home' }">
    <button 
        @click="activeTab = 'home'"
        :class="{ active: activeTab === 'home' }"
    >
        首页
    </button>
    <button 
        @click="activeTab = 'about'"
        :class="{ active: activeTab === 'about' }"
    >
        关于
    </button>
</div>

<div x-data="{ progress: 50 }">
    <input type="range" x-model="progress" min="0" max="100">
    <div class="progress-bar">
        <div 
            class="progress-fill"
            :style="{ width: progress + '%' }"
        ></div>
    </div>
    <span x-text="progress + '%'"></span>
</div>

<div x-data="{
    images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
    ],
    currentIndex: 0,
    get currentImage() {
        return this.images[this.currentIndex]
    }
}">
    <img :src="currentImage" :alt="'Image ' + (currentIndex + 1)">
    <button @click="currentIndex = (currentIndex + 1) % images.length">
        下一张
    </button>
</div>

<div x-data="{
    email: '',
    get isValid() {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)
    }
}">
    <input 
        x-model="email"
        :class="{ 'is-valid': isValid && email, 'is-invalid': !isValid && email }"
        placeholder="输入邮箱"
    >
    <span x-show="isValid && email" style="color: green">✓ 有效</span>
    <span x-show="!isValid && email" style="color: red">✗ 无效</span>
</div>

<div x-data="{
    loading: false,
    async submit() {
        this.loading = true
        await new Promise(r => setTimeout(r, 2000))
        this.loading = false
    }
}">
    <button 
        @click="submit()"
        :disabled="loading"
        :class="{ 'opacity-50': loading }"
    >
        <span x-show="!loading">提交</span>
        <span x-show="loading">处理中...</span>
    </button>
</div>

<div x-data="{ showPassword: false }">
    <input 
        :type="showPassword ? 'text' : 'password'"
        placeholder="密码"
    >
    <button @click="showPassword = !showPassword">
        <span x-text="showPassword ? '隐藏' : '显示'"></span>
    </button>
</div>

<div x-data="{
    users: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
    ]
}">
    <template x-for="user in users" :key="user.id">
        <div :data-id="user.id" :data-name="user.name">
            <span x-text="user.name"></span>
        </div>
    </template>
</div>

<div x-data="{ expanded: false }">
    <button 
        @click="expanded = !expanded"
        :aria-expanded="expanded"
        aria-controls="content"
    >
        切换
    </button>
    <div 
        id="content"
        :aria-hidden="!expanded"
        x-show="expanded"
    >
        内容
    </div>
</div>

<div :class="activeClass"></div>
<div :class="'class-' + id"></div>
<div :class="isActive ? 'active' : ''"></div>

<div x-data="{ value: null }">
    <div :title="value">没有 title 属性</div>
</div>

<div x-data="{ isActive: true }">
    <div class="static-class" :class="{ active: isActive }">
        同时有 static-class 和 active
    </div>
</div>