// v-if 指令
<body>
<div id="v-if" v-if="login">
文字
</div>
<script>
var app = new Vue ({
el:'#v-if',
data:{
login: true
}
})
</script>
</body>
// v-for 指令
<body>
// 循環(huán)數(shù)組
<div id="v-for">
<ul>
<li v-for="i in items">{{i}}</li>
</ul>
</div>
<script>
var app = new Vue ({
el:'#v-for',
data:{
items: [1,2,3,4,5]
}
})
</script>
// 循環(huán)數(shù)組對(duì)象
<div id="v-for">
<ul>
<template v-for="i in items">
<li>{{i.name}}</li>
<li>{{i.age}}</li>
</template>
</ul>
</div>
<script>
var app = new Vue ({
el:'#v-for',
data:{
items:[
{
name:'Jackson',
age:'18',
},
{
name:'marshall',
age:'20',
},
]
}
})
</script>
// 遍歷對(duì)象屬性
<div id="v-for">
<p v-for="(value,key,index) in items">
{{index}} - {{key}} : {{value}}
</p>
</div>
<script>
var app = new Vue ({
el: '#v-for',
data: {
items: {
name: 'ESP',
age: '18',
addesrs: '上海',
}
}
})
</script>
</body>
// v-on 綁定事件監(jiān)聽(tīng)器
<body>
<div id="app">
<p>計(jì)數(shù)器：{{count}}</p>
<!-- 完整寫(xiě)法 -->
<button v-on:click="add">增加</button>
<!-- 簡(jiǎn)寫(xiě) -->
<button @click="dec">減少</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function(){
this.count++
},
dec:function(){
this.count--
},
}
})
</script>
</body>
// v-on 修飾符
<body>
<div id="app">
<p>{{message}}</p>
<!-- 雙向數(shù)據(jù)綁定 -->
<p>v-model:<input type="text" v-model="message"></p>
<!--
lazy: 懶加載數(shù)據(jù) 移開(kāi)焦點(diǎn)顯示數(shù)據(jù)
number: 輸入數(shù)字
trim: 去掉收尾空格
-->
<p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
<p>v-model.number:<input type="text" v-model.number="message"></p>
<p>v-model.trim:<input type="text" v-model.trim="message"></p>
<br>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"Hello"
},
})
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
