单项数据绑定:{{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"
}
}
}
});
};