<template>
    <!-- 文本插值演示({{ variable }}) -->
    <h3>
        <span v-text="textInsertDemo"></span>
    </h3>
    <div>
        <label>
            输入：
        </label>
        <input id=input type="text">
        </input>
        <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>

</template>

  
<script>
export default {

    data() {
        return {
            // 文本插值演示
            "msg": "",
            "textInsertDemo": "文本插值演示({{ 变量 }})",
            // 原始HTML演示
            "htmlStr": "<span style='color: red'>This should be red.</span>",
            // Attribute 绑定
            "displayClass": "",
            "displayFlag": true,
            "multipleClass": {
                id: 'container',
                class: 'wrapper'
            }
        }
    },
    methods: {
        // 文本插值演示
        onClick() {
            this.msg = "Hello " + document.getElementById("input").value
        },
        // Attribute 绑定
        onToggleDisplay() {
            this.displayFlag = !this.displayFlag
            if (this.displayFlag) {
                this.displayClass = "show"
            } else {
                this.displayClass = "hide"
            }
        },
        idFunction() {
            return "dynamicId"
        },
        bindFunction() {
            return "绑定函数的返回结果"
        }
    }
}
</script>


<style>
.show {
    display: block;
}

.hide {
    display: none;
}

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