Vue 初始化多个Vue 及之间的相互修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="vue.css"> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <style type="text/css"> .cr{ color:red; } </style> </head> <body> <h3>初始化多个Vue 实例对象</h3> <div id="vue-app-one"> <h2 id ='colorred' v-bind:class="{cr:ended}">{{ msg }}</h2> <p>{{ greet }}</p> </div> <div id="vue-app-two"> <h2>{{ msg }}</h2> <p>{{ greet }}</p> <button v-on:click="changMsg" >修改vmOne.msg信息</button> </div> <script src="app.js"></script> </body> </html>
HTML
var vmOne=new Vue({ el:'#vue-app-one', data:{ msg:'你妹的', ended:false }, methods:{ }, computed:{ greet:function(){ return 'hello world!'; } } }); var vmTwo=new Vue({ el:'#vue-app-two', data:{ msg:'你哥的' }, methods:{ changMsg:function(){ vmOne.msg='修改消息'; vmOne.ended=true; } }, computed:{ greet:function(){ return 'hello world!'; } } });
Vue.js
Vue 初始化多个Vue 及之间的相互修改的更多相关文章
- vue使用案例,vue初始化,vue初始化方法,vue条件语句,vue在js里面添加元素调用vue方法
<div id="main" > <button id='but1' type="button" v-on:click="save ...
- vue子组件,同级组件之间的相互引用,以及传值交互
博客地址:http://blog.csdn.net/wang_meiwei/article/details/75948844
- vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )
new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedS ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- Vue初始化过程
用vue也有一两年了,始终对vue一知半解,不怎么了解内部的执行过程,最近在看vue源码,还是不少收获的,其中不乏浏览器事件轮询机制.闭包.设计模式等,还是非常值得一读.本篇简要记录下vue的初始化过 ...
- 无法执行vue初始化命令
无法执行vue初始化命令:https://www.jianshu.com/p/9eb3cf854aa8 今天vue 初始化项目时提示错误 执行命令: npm install -g vue-cli 执行 ...
- 百度地图的初始化应当在vue的mounted()函数里执行
今天使用百度地图出现了一个问题,百度地图初始化后宽.高都是0,但是地图容器宽高都设置好的, 一开始怎么都排除不出问题,后来无语了,把布局直接复制进入百度地图的示例里运行发现没有问题, 所以想到不是百度 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue初始化页面闪动问题
使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们 ...
随机推荐
- 18.异常.md
目录 1.try...catch 2.异常了的继承机制 2.1基本概念 2.2常用异常 2.3多异常捕获 2.4获取异常信息 2.5finally回收资源 2.6Checked异常和Runtime异常 ...
- Structs复习 Path问题
Path问题相对复杂 主要是路劲问题 但结论很简单 就是统一使用绝对路径 jar包 web.xml <?xml version="1.0" encoding="UT ...
- web.xml中的load-on-startup
1)load-on-startup元素标记容器是否在启动的时候就加载这个servlet(实例化并调用其init()方法). 2)它的值必须是一个整数,表示servlet应该被载入的顺序 2)当值为0或 ...
- border&background1
1.border-radius border-top-left-radius:10px; = border-top-left-radius:10px 10px; (水平10px 竖直10px 被正圆切 ...
- js基础-基本包装类型
var t = 13; t.toString(); //t是一个简单数值类型 现在有了方法 toString 对象类型的方法 //数值类型有对应的包装类型 var t1 =new Number(333 ...
- 立个FLAG
今天再次初步浏览了寒假生活: 三篇阅读笔记(人月神话,梦断代码,程序员修炼之道:从小工到专家),2月24日之前发表开发记账本软件,连续七天以上发表开发进度 学会使用GitHub,录制抖音(父母评价作品 ...
- kotlin 代码习惯1
让你的 Kotlin 代码远离 !! 简评:优雅的运用 Kotlin 的 null safety 特性,而不要简单的直接用 !!. 对于 Null 的检查是 Kotlin 的特点之一.强制你在编码过程 ...
- soap 简单调用其他系统的函数
<?xml version ='1.0' encoding ='UTF-8' ?> <definitions name='自定义名称' targetNamespace='目标命名空间 ...
- keras初探
1.对网络的理解: 2.怎样训练,输入已经数据,经过训练,输入测试数据,得到相似数据 3.RNNs 循环神经网络
- Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util
Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util,导入包的方法为,import java.util.*: 完整的实例代码: /* 导入基础工具包 */ import java.uti ...