// 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>
// 循环数组
<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>
// 循环数组对象
<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>
// 遍历对象属性
<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 绑定事件监听器
<body>
<div id="app">
<p>计数器：{{count}}</p>
<!-- 完整写法 -->
<button v-on:click="add">增加</button>
<!-- 简写 -->
<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>
<!-- 双向数据绑定 -->
<p>v-model:<input type="text" v-model="message"></p>
<!--
lazy: 懒加载数据 移开焦点显示数据
number: 输入数字
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>
网友评论