VUE面试题

最新推荐文章于 2024-07-18 09:37:35 发布

子非鱼emma

最新推荐文章于 2024-07-18 09:37:35 发布

阅读量110

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_38998319/article/details/117673592

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中如何创建局部和全局过滤器，用于数据的处理和展示。例如，通过`Vue.filter`定义了一个全局过滤器`getval`，并在两个不同组件中使用。同时，解释了Vue组件中`data`属性必须为函数的原因，确保每个组件实例拥有独立的数据副本，避免组件间数据污染。

摘要由CSDN通过智能技术生成

day1

1.Vue如何自定义一个局部过滤器

<body>
    <div id="app">
     <input type="text" v-model="msg" />
     {{msg| getvalues }}
</div>

</body>
<script>
    var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      getvalue: function (value) {
        if (!value) return ''
      
        return value
      }
    }
})

2.VUE如何定义全局过滤器

body>
    <div id="app1">
        <input type="text" v-model="msg" />
        {{msg| getval }}
    </div>

    <div id="app2">
        <input type="text" v-model="msg" />
        {{msg| getval }}
    </div>

</body>

<script>
    Vue.filter('getval', function (value) {
  if (!value) return ''
 
  return value
})
    var vm = new Vue({
        el: "#app1",
        data: {
            msg: ''
        },

    })

    var vm = new Vue({
        el: "#app2",
        data: {
            msg: ''
        },

    })
</script>

3.Vue 组件 data 为什么必须是函数

    // 创建一个组件
var Component= function() {
}
Component.prototype.data = {
  a: 1,
  b: 2
}

// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
console.log(component1.data.b);
b=component2.data.b   // 3
console.log(b);