<template>
<div class="tem_wrap">
<div class="formDemo">
    <label class="control-label">姓名:</label>
    <input class="input" v-model="testData.name" /><br/>
    <label class="control-span">姓名变为:</label>
    <input class="input" v-model="testData.name" /><br/><br/>
    <label class="control-span">v-if:是否填的李小鹏</label><br>
    <label class="control-span" v-if="openVlue">名字:{{testData.name}}</label><br/>
    <input class="input" v-if="testData.name=='李小鹏'" v-model="testData.name" /><br>
    <label class="control-span">v-show:是否填的刘伟</label><br>
    <label class="control-span" v-show="VShowBool">名字:{{testData.name}}</label><br/>
    <input class="input" v-show="testData.name=='刘伟'" v-model="testData.name" />
    <label class="control-span">v-else:否填的刘伟</label><br>
<!--    <label class="control-label"v-model="testData.name" v-if="testData.name=='刘伟'">刘伟</label>-->
<!--    <label class="control-label" v-else>不是刘伟</label><br><br>-->

    <label class="control-span">v-for示例：</label><br>
    <ul>
        <li v-for="item in items" :key="item">
            {{ item.message }}
        </li>
    </ul>
    <label class="control-span">v-on示例：</label><br>
    <input type="button" value="提交" v-on:click="saveForm" /><br>
    <input type="button" value="提交表单" @click="updateForm" />

</div>


</div>
</template>

<script>
    export default {
        name: "OftenInstructionsDemo",
        components:{

        },
        methods:{
            saveForm:function () {
                alert(11111)
            },
            updateForm:function () {
                alert(22222)
            }
        },
        data() {
            return {
                openVlue:true,
                VShowBool:true,
                testData:{
                    name:"李小鹏"
                },
                items: [{
                    message:"武汉加油，武汉加油"
                }, {
                    message:"全国人民都要动员起来"
                },{
                    message:"口是心非你深情的承诺，都随西风缥缈远走"
                }, {
                    message:"痴人梦话我钟情的依托，就像枯萎凋零的花朵"
                }],
            }
        }
    }
    // cosole.log(1111)
</script>

<style scoped>
.tem_wrap{
    margin:10px auto auto;
    padding: 10px;
    width: 90%;
    height: 500px;
    background: #2c3e50;
    text-align: left;
}
    label{
        color: bisque;
        font: 12px;
    }
    ul li{
        color: beige;
        font: 12px;
    }
</style>