专栏首页葫芦cssjshtml vue.js 多个vue实例

cssjshtml vue.js 多个vue实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>if</title>
</head>
<body>
<div id="vue-app">
    <h1> 实例化多个对象</h1>
    <div id="vue-app-one">
    <p>    {{ title }}</p>
       <p> {{ greet }}</p>

    </div>
    <div id="vue-app-two">
<p> {{ title }}</p>
     <p>   {{ greet }}</p>
        <button v-on:click="change">change one</button>
    </div>

    <script src="/static/js/vue.min.js"></script>
    <script>
        var one = new Vue({
            el: "#vue-app-one",
            data: {
                title: "app-one"
            },
            methods: {},
            computed: {
                greet:function () {
                    return "computed app one"
                }
            }
        });

        var two = new Vue({
            el: "#vue-app-two",
            data: {
                title: "app-two"
            },
            methods: {
                change:function () {
                    one.title="changed app one"
                }
            },
            computed: {
                                greet:function () {
                    return "computed app two"
                }
            }
        });
        two.title="changed app two";
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解RunLoop及在开发中的应用

    RunLoop:运行循环,简单的说就是处理线程事件和管理线程的一种机制。当子线程的事件结束时,runloop将会自动休眠,app主线程中的runloop处于一直...

    honey缘木鱼
  • iOS--React Native 图片插件(打开、保存、剪切、压缩)

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移...

    用户2932962
  • 13岁女学生被捕:因发布JavaScript无限循环代码

    导读:日本刈谷市警方近日质询并指控了一名13岁的女学生,起因是她将一段恶意代码的链接放到了在线公告栏上,广泛传播代码。这段有问题的恶意代码是弹出警告消息的无限循...

    华章科技
  • 【干货】容器Web Console技术实现

    现如今,随着容器技术的普及,越来越多的公司都开始尝试将其与自身的业务相结合,以提高生产和运维效率。

    杨振涛
  • nodejs之next_tick源码分析

    next_tick函数是process对象的一个属性。他是在bootstrap_node.js中设置的。

    theanarkh
  • 工作笔记——使用Jest时遇到的一些问题

      最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了...

    zaking
  • JavaScript 为什么要有 Symbol 类型?

    Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时。 但是,它们能为我们做些字符串不能做的事情呢?

    Fundebug
  • (大结局)左右互搏:生成型对抗性网络的强大威力

    生成型对抗性网络,简称GEN,在2014年时被发明。它与上一节介绍的VAE也就是编解码网络一样,擅长于图像构造,然而它的功能比VAE要强大不少,我们现在时常听到...

    望月从良
  • DartVM服务器开发(第二十七天)--热重载(解密热重载)

    热重载其实就是将一个文件加入到监听中,如果有改变,就会对程序进行更新,我们可以集成jaguar_hotreload这个包,添加之后,就可以实现无需重启服务器进行...

    rhyme_lph
  • 巧用 TypeScript(五)-- infer

    infer 最早出现在此 PR 中,表示在 extends 条件语句中待推断的类型变量。

    三毛

扫码关注云+社区

领取腾讯云代金券