<script setup>
import { ref } from 'vue'

const message = ref('')
const count = ref(0)
const showText = ref(true)

const imgUrl = ref('https://via.placeholder.com/120')

const list = ref(['苹果', '香蕉', '橘子'])

const textContent = ref('这是 v-text 渲染的文本')
const htmlContent = ref('<strong style="color:red;">这是 v-html 渲染的 HTML</strong>')
</script>

<template>
  <!-- v-cloak 用来防止页面在 Vue 尚未完成编译前出现闪烁现象 -->
  <!-- 在 Vue 接管页面之前, 模板里的 {{ message }} 不会被用户看到 -->
  <div class="container" v-cloak>
    <!-- v-model -->
    <h2>v-model 示例</h2>
    <input v-model="message" placeholder="输入点什么..." />
    <p>你输入的是：{{ message }}</p>

    <!-- v-bind -->
    <!-- :src 等价于 v-bind:src -->
    <h2>v-bind 示例</h2>
    <img :src="imgUrl" :alt="message" width="120" />

    <!-- v-on -->
    <h2>v-on 示例</h2>
    <button @click="count++">点击 +1</button>
    <p>点击次数：{{ count }}</p>

    <!-- v-if / v-else -->
    <h2>v-if / v-else 示例</h2>
    <p v-if="count % 2 === 0">当前是偶数</p>
    <p v-else>当前是奇数</p>

    <!-- v-show -->
    <h2>v-show 示例</h2>
    <p v-show="showText">这段文字可以显示/隐藏</p>
    <button @click="showText = !showText">切换显示</button>

    <!-- v-for -->
    <h2>v-for 示例</h2>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ index + 1 }}. {{ item }}
      </li>
    </ul>

    <!-- v-text -->
    <h2>v-text 示例</h2>
    <p v-text="textContent"></p>

    <!-- v-html -->
    <h2>v-html 示例</h2>
    <div v-html="htmlContent"></div>

    <!-- v-pre -->
    <h2>v-pre 示例</h2>
    <p v-pre>{{ 这里的内容不会被 Vue 解析 }}</p>

    <!-- v-once -->
    <h2>v-once 示例</h2>
    <p v-once>这个值只渲染一次：{{ count }}</p>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

[v-cloak] {
  display: none;
}
</style>