vue内置语法v-for,v-if,v-once,v-show
五 内置语法
vue 内置了一些语法，可以方便我们快速开发,比如 v-clock, v-for ,v-if等；
5.1 v-cloak
<div id="app" v-cloak>
{{content}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
content: "知识追寻者",
},
})
</script>5.2 v-once
定义的元素或者组件只渲染一次
<div id="app" >
<div v-once>{{content}}</div>
<span v-once>{{content}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
content: "知识追寻者",
},
})
</script>5.3 v-if-else
v-else-if 跟在 v-if 后面， v-else 跟在v-else-if 或者 v-if 后面； vue在渲染时尽可能使用已有的元素；
如下示例中 在点击按钮时会改变输入框
<div id="app" >
<template v-if="loginType === 'username'">
<label>username</label>
<input placeholder="用户名">
</template>
<template v-else>
<label>password</label>
<input placeholder="密码">
</template>
<button @click=changeLoginType>改变输入类型</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
loginType: "username",
},
methods: {
changeLoginType: function(){
this.loginType = (this.loginType == 'username' ? 'password' : 'username');
}
}
})
</script>渲染结果
点击按钮后
由于input标签不唯一，会存在在username输入框输入内容后切换至password输入框内容未被清空；故需要使用vue的key属性保证input是单独唯一；
<div id="app" >
<template v-if="loginType === 'username'">
<label>username</label>
<input placeholder="用户名">
</template>
<template v-else>
<label>password</label>
<input placeholder="密码">
</template>
<button @click=changeLoginType>改变输入类型</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
loginType: "username",
},
methods: {
changeLoginType: function(){
this.loginType = (this.loginType == 'username' ? 'password' : 'username');
}
}
})
</script>5.4 v-show
v-show 是改变CSS的 display 属性； 当 v-show 为 false 时 ，内容就会被隐藏，相当于display: none;；
<div id="app" >
<p v-show="status==1">知识追寻者</p>
<button @click=changeStatus>是否隐藏</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
methods: {
changeStatus: function(){
this.status = (this.status == '1' ? '2' : '1');
}
}
})
</script>渲染结果
<p style="display: none;">知识追寻者</p>Tip : v-show 不能在 < template> 中使用
5.5 v-for
v-for 使用方式 是 item in items ； 其中 item 是一个对象；items 是对象集合；可以从item中获取属性；
<div id="app" >
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
users : [
{name : '知识追寻者'},
{name : '李霄云'},
{name : '蜡笔小新'}
]
}
})
</script>页面渲染结果
- 知识追寻者
- 李霄云
- 蜡笔小新
可以用
of替代in作为分隔符 <div v-for="item of items"></div>
v-for 使用在 template 上
<div id="app" >
<ul>
<template>
<li v-for="user in users">{{user.name}}</li>
</template>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
users : [
{name : '知识追寻者'},
{name : '李霄云'},
{name : '蜡笔小新'}
]
}
})
</script>v-for 使用对象语法
支持 value in item ; (value , key) in item ; (value, key, index ) in item;
<div id="app" >
<ul>
<template>
<li v-for="(value ,key ) in user">{{key}}: {{value}}</li>
</template>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
user : {
name : '知识追寻者',
age : '25',
regular : 'jog'
},
}
})
</script>渲染结果
- name: 知识追寻者
- age: 25
- regular: jog
5.6 数组更新
Vue 包裹数组监听方法
push()pop()shift()unshift()splice()sort()reverse()
push 示例
<div id="app" >
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
users : [
{name : '知识追寻者'},
{name : '李霄云'},
{name : '蜡笔小新'}
]
}
})
app.users.push({
name : '一口'
})
</script>渲染示例
- 知识追寻者
- 李霄云
- 蜡笔小新
- 一口
5.7 方法事件
v-on:click 基本用法实现计数器
<div id="app" >
<span>点击次数：{{count}}</span>
<button @click="addCount">添加次数</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
count : 1,
},
methods :{
addCount: function() {
this.count = this.count + 1;
}
}
})
</script>原则上 @click的方法名称也可以带()；然后还可以传参,
在 vue 中使用原生的事件
<div id="app" >
<span>点击次数：{{count}}</span>
<button @click="addCount">添加次数</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
count : 1,
},
methods :{
addCount: function(event) {
this.count = this.count + 1;
if (event) {
// 弹出标签名称
alert(event.target.tagName)
}
}
}
})
</script>多个参数
<div id="app" >
<span>点击次数：{{count}}</span>
<button @click="addCount('标签是',$event)">添加次数</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
status: "1",
},
data: {
count : 1,
},
methods :{
addCount: function(message,event) {
this.count = this.count + 1;
if (event) {
event.preventDefault()
// 弹出标签名称
alert(message + event.target.tagName)
}
}
}
})
</script>事件修饰符，案件修饰符以后再写
