js如何设置点击之后2秒document点击无效_day77 vue框架-2

最新推荐文章于 2023-06-13 19:53:02 发布

weixin_39517357

最新推荐文章于 2023-06-13 19:53:02 发布

阅读量238

点赞数

文章标签： js如何设置点击之后2秒document点击无效

本文链接：https://blog.csdn.net/weixin_39517357/article/details/112077171

版权

这篇博客介绍了Vue框架的相关知识，包括过滤器的定义、计算属性的使用、监听属性的实现，以及如何阻止事件冒泡和页面刷新。文章还详细讲解了Vue对象的生命周期，并通过一个todolist案例展示了如何在Vue中创建和管理数据。

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

一、过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种。

1-1、全局过滤器

<body>
<div id="d1">
    <p>{
    {num}}</p>
    <p>{
    {num|a}}</p>
</div>
<script >
    Vue.filter('a',function (num01) {
        return num01.toFixed(2)

    })
    var vm=new Vue({
        el:"#d1",
        data:{
            num:6.66231
        },
        methods:{
        }
    })
</script>


注意一般全局过滤器写一个单独的js文件，导入即可

1-2、局部过滤器

<div id="d1">
    <p>{
    {num}}</p>
    <p>{
    {num|a}}</p>
</div>
<script >

    var vm=new Vue({
        el:"#d1",
        data:{
            num:6.66231
        },
        methods:{
        },
        filters:{
            a(num01){
                return num01.toFixed(2)
            }
        }

    })
</script>

</body>

二、计算属性

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

<body>
<div id="d1">
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">=<span>{
    {total}}</span>
</div>
<script >

    var vm=new Vue({
        el:"#d1",
        data:{
            num1:0,
            num2:0
        },
        methods:{
        },
        computed:{
            total(){
                return this.num1+this.num2
            }
        }

    })
</script>

</body>

但是这种是字符串拼接，不是计算：

修正：
computed:{
            total(){
                return parseFloat(this.num1)+parseFloat(this.num2)
            }
        }

三、监听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

无限点赞：
<div id="d1">
<button @click="num++">赞{
    {num

最低0.47元/天解锁文章

weixin_39517357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js如何设置点击之后2秒document点击无效_day77 vue框架-2

一、过滤器过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。定义过滤器的方式有两种。1-1、全局过滤器<body><div id="d1"> <p>{{num}}</p> <p>{{num|a}}</p></div><script > ...
复制链接

扫一扫