<template>

    <!--只能有一个根节点 -->

    <div>

        <pre>

            *v-text  是元素的innertext 只能在双标签中使用

            *v-html  是元素的innerHTML，不能包含<!-- {{xxx}} -->

            *v-if 元素是否移除或者插入

            *v-show  元素隐藏或者显示

            *v-model  双向数据绑定

        </pre>

        // v-text

        <span v-text="text"></span>

        <hr>

        <span v-html="html"></span>

        v-if:

        <div v-if="isShow" style="height:100px;background:#562366;"></div>

        v-show:

        <div v-show="isShow" style="height:100px;background:#333;"></div>

        v-model:

        <input type="text" name="" v-model="mText">

        {{mText}}

        <!-- 给下面的input的value赋值用v-bind：value -->

        <br>

        <input type="text" name="" v-bind:value="mText">

    </div>

</template>

<<script>

    export default {

        data(){

            return {

                text:'我是v-text玩的东西',

                html:`

                    <ul>

                       <li>vksdnkfndk </li>

                       <li>kbnskdfkb </li>

                    </ul>

                `,

                isShow:false,

                mText:''

            }

        }

    }

</script>