常用指令及过滤器学习

最新推荐文章于 2024-05-30 13:59:14 发布

zengcs_china

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量145

点赞数

分类专栏： VUE学习文章标签： javascript vue.js

本文链接：https://blog.csdn.net/zengcs_china/article/details/107974063

版权

VUE学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

分支循环结构

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(){
           //业务逻辑
    }
}

zengcs_china

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用指令及过滤器学习

分支循环结构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> <!-- k
复制链接

扫一扫