Vue基本指令（一）

  单项数据绑定：{{singleBindData}}
        <br />
        <input type="text" v-model="doubleBindData" />    @*数据指令*@
        <span>{{doubleBindData}}</span>

        <br />
        <div v-bind:style="styJson">I am propertyBind</div> @*属性指令*@
        <div v-bind:class="classArr">I am propertyBind too</div>

        <br />
        <input type="button" v-on:click="btnFunction_1" value="提交1" />   @*事件指令*@
        <input type="button" v-on:click="btnFunction_2" value="提交2" />

        <br />
        <ul>
            @*遍历数组*@
            <li v-for="item,index in UserDatas">索引：{{index}}，姓名：{{item.name}}，年龄：{{item.age}}</li>  @*循环指令*@
        </ul>
        <ul>
            @*遍历json嵌套*@
            <li v-for="item,index in UserJsonDatasA">索引：{{index}}，姓名：{{item.name}}，年龄：{{item.age}}</li>  @*循环指令*@
        </ul>
        <ul>
            @*遍历json*@
            <li v-for="item,index in UserJsonDatasB">索引：{{index}}：{{item}}</li>  @*循环指令*@
        </ul>

        <br />
        <input type="button" v-on:click="ShowOrHide" v-model="ShowHideMarker">
        @*v-show实际上是元素的隐藏*@
        <div v-show="showMark" style="border:2px solid red;width:130px;height:20px;"></div>   @*显示指令*@
        @*v-if实际上是元素彻底的删除了*@
        <div v-if="showMark" style="border:2px solid blue;width:130px;height:20px;"></div>

 

 

 function TestFunction() {

        let vm = new Vue({
            el: '#AppStar',
            data: {
                singleBindData: "I am SingleBindData",
                doubleBindData: "",
                styJson: {
                    color: "blue",
                    'font-size': "30px"
                },
                classArr: ["aaa", "bbb"],
                UserDatas: [
                    { name: "star", age: 23 },
                    { name: "king", age: 12 },
                    { name: "queen", age: 132 },
                    { name: "Ace", age: 132 },
                ],
                UserJsonDatasA:{
                    "1001": { name: "star", age: 23 },
                    "1002": { name: "king", age: 13 },
                    "1003": { name: "queen", age: 43 },

                },
                UserJsonDatasB: {
                    name: "star", age: 23 
                },
                showMark: true,
                ShowHideMarker:"Hide"
            },
            methods: {
                btnFunction_1() {
                    alert("btnFunction_1");
                },
                btnFunction_2: function () {
                    alert(this.doubleBindData);
                },
                ShowOrHide() {
                    this.showMark = !this.showMark;
                    if (this.showMark) {
                        this.ShowHideMarker="Hide"
                    }
                    else {
                        this.ShowHideMarker="Show"
                    }
                }
            }
        });

        };