<template>
    <hr style="height: 30px;
    border: 0;
    box-shadow: inset 0 30px 30px -30px darkblue;">
    <H1>
        Tutorial-1-composition
    </H1>
    <br>
    <hr>
    <!-- 文本插值演示({{ variable }}) -->
    <h3>
        <span v-text="textInsertDemo"></span>
    </h3>
    <div>
        <label>
            输入：
        </label>
        <input id=input2 type="text" value="composition(组合式)"/>
        <button v-on:click="onClick" >
            点击生成文本插值
        </button>
    </div>
    <div>
        <label>
            文本插值：
        </label>
        <output>
            {{ msg }}
        </output>
    </div>
    <br>
    <hr>
    <!-- 原始HTML演示(v-html) -->
    <h3>
        原始HTML演示(v-html)
    </h3>
    <div>
        <p>使用文本插值</p>
        <span>{{ htmlStr }}</span>
    </div>
    <div>
        <p>使用HTML插值</p>
        <span v-html="htmlStr"></span>
    </div>
    <br>
    <hr>
    <!-- Attribute 绑定(v-bind) -->
    <h3>
        Attribute 绑定(v-bind)
    </h3>
    <h4>
        动态绑定属性值
    </h4>
    <div>
        <button v-on:click="onToggleDisplay" id="toggleDisplay">切换显示</button>
    </div>
    <div>
        <output v-bind:class="displayClass">被显示/隐藏的内容</output>
    </div>
    <br>
    <hr class="half-line">
    <h4>
        绑定多个值
    </h4>
    <div v-bind="multipleClass">检查这个div的class</div>
    <br>
    <hr class="half-line">
    <h4>
        直接绑定函数
    </h4>
    <div v-bind:id="idFunction()">
        {{ bindFunction() }}
    </div>
    <br>

</template>

  
<script>
import {ref} from "vue"

export default {

    // 固定名称的函数，在生命周期钩子中自动执行
    setup() {

        // 定义响应式变量，和唯一的ref绑定
        const msg = ref(0)
        msg.value = "composition(组合式)"
        const textInsertDemo = ref("文本插值演示({{ 变量 }})")
        // 原始HTML演示
        const htmlStr = ref("<span style='color: red'>This should be red.</span>")
        // Attribute 绑定
        const displayClass = ref(3)
        const displayFlag = ref(4)
        // 绑定多个值
        const multipleClass = ref({
            id: 'container',
            class: 'wrapper'
        })

        // 定义方法
        function onClick() {
            this.msg = "Hello " + document.getElementById("input2").value
        }

        function onToggleDisplay() {
            this.displayFlag = !this.displayFlag
            if (this.displayFlag) {
                this.displayClass = "show"
            } else {
                this.displayClass = "hide"
            }
        }

        function idFunction() {
            return "dynamicId"
        }

        function bindFunction() {
            return "绑定函数的返回结果"
        }

        // 返回变量和函数，暴露给模板使用
        return {
            // 变量
            msg,
            textInsertDemo,
            htmlStr,
            displayClass,
            displayFlag,
            multipleClass,
            onClick,
            onToggleDisplay,
            idFunction,
            bindFunction
        }
    }
}

</script>


<style>
.show {
    display: block;
}

.hide {
    display: none;
}

.half-line {
    width: 50%; /* 改变宽度为50%，实现半条线的效果 */
    border: none; /* 移除默认边框 */
    height: 0.5px; /* 设置线条的高度 */
    background-color: grey; /* 设置线条颜色 */
    float: left;
}
</style>
