一.过滤器
可被用作一些常见的文本格式化 用途:双花括号插值和v-bind表达式
语法
1.{{变量|过滤器名}} 2. {{变量|过滤器名|另一个过滤器名}}
格式 在script标签中
Vue.filter(过滤器名字，函数（数据（data），传递参数(format）{
console.log(data)
console.log(format)
}
二.键盘修饰符
键盘按下
<input type="text" @keyup="input1" v-model="value">
键盘a的值
<input type="text" @keyup.65="input1" v-model="value">
空格
<input type="text" @keyup.space="input1" v-model="value">
f5
<input type="text" @keyup.f5="input1" v-model="value">
tab
<input type="text" @keyup.tab="input1" v-model="value">
<input type="text" @keyup.tab="input1" v-model="value">
<input type="text" @keyup.tab="input1" v-model="value">
自定义
Vue.config.keyCodes.m=77
键盘按键
.enter(回车)
.tab
.delete (退格键)
.esc
.space
.up
.down
.left
.right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue-2.4.0.js"></script>
<style>
ul{
list-style: none;
}
li{
width: 300px;
height: 50px;
background: red;
text-align: center;
line-height: 50px;
margin-left: 50px;
float: left;
}
#div1{
margin-top: 50px;
width: 300px;
height: 300px;
background: blue;
text-align: center;
line-height: 300px;
color: black;
}
.active{
color: blue;
display: block;
}
.none{
display: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
{{item.name}}
<div :class="activeIndex == index? 'active':'none'" id="div1" > {{item.content}}</div>
</li>
</ul>
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
list:[
{ id:1,
name:'选项一',
content:'内容一'
},
{ id:2,
name:'选项二',
content:'内容二'
},
{ id:1,
name:'选项三',
content:'内容三'
},
],
activeIndex:0
},
methods:{
}
})
</script>
</html>
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
