分支循环结构
v-for:遍历数组
<body>
<div id="app">
<ul>
<li v-for='item in city'>{{ item }}</li>
<li v-for='(item,index) in city'>{{ index }}....... {{ item }}</li>
<!-- key的作用:帮助Vue区分不同的元素,提高性能,如下item.id是唯一的值 -->
<li :key='item.id' v-for="(item,index) in student">{{ item.name }}.......{{item.age}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
city: ['上海', '广州', '深圳'],
student: [
{
id: 0,
name: '黎明',
age: 15,
},
{
id: 1,
name: '小米',
age: 17,
},
{
id: 2,
name: '小红',
age: 25,
}
]
}
})
</script>
v-for:遍历对象
<li v-for='(value,key,index) in student[0]'>{{value+'.....'+key+'.....'+index}}</li>
v-for可以与v-if结合使用,v-if命中的元素才会被渲染
<li v-if='index==1' v-for='(value,key,index) in student[0]'>{{value+'.....'+key+'.....'+index}}</li>
表单操作
1.表单域修饰符
number:转化为数值
trim:去掉开始和结尾的空格
lazy:将input时间切换为change事件
<input type="number" v-model.number="age">
自定义指令
1.不带参数的自定义指令
// 自定义指令
Vue.directive('focus', {
inserted: function (e) {
e.focus();
}
});
2.带参数的自定义指令
<input type="text" v-focus v-color='{color:"blue"}'>
// 带参数的自定义指令
Vue.directive('color', {
inserted: function (e, binding) {
// console.log(e);
console.log(binding.value);
/* e.style.background = binding.value; */
/* 功能同上面一句 */
e.style.background = binding.value.color;
}
})
3.局部指令:其定义在new Vue中
// 局部指令
directives: {
focus: {
inserted: function (e, binding) {
e.focus();
}
},
color: {
bind: function (e, binding) {
e.style.background = binding.value.color;
}
}
}
计算属性
1.使用的目的是使模板内容更加简洁,如下定义一个反转字符串的函数
<div>{{ reverseString }}</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'nihao',
},
// 计算属性
computed: {
reverseString: function () {
return this.msg.split('').reverse().join('');
}
}
})
</script>
监听器
1.用于数据变化时执行异步或开销较大的操作
// 监听器用法,属性名称要与方法名称一致
watch: {
name1: function (val) {
this.msg = val + '和' + this.name2;
},
name2: function (val) {
this.msg = this.name1 + '和' + val;
}
}
过滤器
1.自定义过滤器 :范围为全局
Vue.filter('过滤器名称', function (value) {
// 业务逻辑
})
2.过滤器使用:其中format,upper是自定义的过滤器
//绑定属性的时候也可使用
<div :id="id | format">{{ msg | upper }}</div>
3.局部过滤器
filters:{
过滤器名称:function(){
//业务逻辑
}
}