vue.js从入门到实战：example_02_04

最新推荐文章于 2024-06-12 08:41:10 发布

dpj_1980

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量118

点赞数

分类专栏：每日学习文章标签： vue.js

本文链接：https://blog.csdn.net/dpj_1980/article/details/109018267

版权

每日学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天的主要知识点是：computed,同样ID的两个变量，在VUE里面，初始的时候，其实是会生成两份的，所以通过computed计算的时候，会给予不同的值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app-one">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
        </div>
        <div id="app-two">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
        </div>
        <script>
            var one= new Vue({
                el: '#app-one',
                data:{
                    title:'app-one的内容'
                },
                computed:{
                    say:function(){
                        return 'Hello One';
                    }
                }
            })
            var two= new Vue({
                el: '#app-two',
                data:{
                    title:'app-two的内容'
                },
                computed:{
                    say:function(){
                        return 'Hello Two';
                    }
                }
            })
           
        </script>
    </body>
</html>

运行效果如下图所示：
运行效果如图

dpj_1980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js从入门到实战：example_02_04

今天的主要知识点是：computed,同样ID的两个变量，在VUE里面，初始的时候，其实是会生成两份的，所以通过computed计算的时候，会给予不同的值：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script>
复制链接

扫一扫