Vue-不允许嵌套式的渲染方法
当存在有两个元素作为需要VUE渲染的对象是,这两个对象不允许存在嵌套关系,比如有 id='a'和 od='b'这两个元素 当
<div id='a'> {{message}} <div id='b'> {{message1}} </div> </div>
如果你想分别对他们进行以下操作(刚学不久,恕我没法用专业术语正确表达)
var app=new Vue({ el:'#a', data:{ message:'a' } }) var app1=new Vue({ el:'#b', data:{ message1:'b' } })
这种时候,Vue虽然没有报错,但不会正常显示。而是直接显示表达式。
而当将A和B分开来时,JS写法不变就可以正常显示,它并不会说根据个人定义来识别,所以能在一个对象里面完成的操作就不用去创建第二个对象
以上这篇Vue-不允许嵌套式的渲染方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue.js实现条件渲染的实例代码
一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=
-
深入理解Vue 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template
-
解决vue数组中对象属性变化页面不渲染问题
做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数
-
Vue声明式渲染详解
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,也就是将模板中的文本数据写进DOM中,使用 {{data}} 的格式写入.此代码都是Vue.js官网上的实例. 1.首先导入Vue.js <script type="text/javascript" src="vue.js"></script> 2.html和js代码 <body> <div id="id"> //i
-
Vue-不允许嵌套式的渲染方法
当存在有两个元素作为需要VUE渲染的对象是,这两个对象不允许存在嵌套关系,比如有 id='a'和 od='b'这两个元素 当 <div id='a'> {{message}} <div id='b'> {{message1}} </div> </div> 如果你想分别对他们进行以下操作(刚学不久,恕我没法用专业术语正确表达) var app=new Vue({ el:'#a', data:{ message:'a' } }) var app1=new Vue
-
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></
-
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面
-
浅谈Vue响应式(数组变异方法)
前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的
-
vue router路由嵌套不显示问题的解决方法
vue router路由嵌套不显示问题的解决方法,具体内容如下 路由嵌套,vue2.0 router中嵌套路由不成功,如何解决? 我先说下我的需求,例如下图 我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每次编译都正常好使. 但是打开编译后的文件之后,一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料. 帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的问题并不是这个原因造成的,原因在于,在子模块里面引用子路由,也是
-
Vue+ElementUI实现表单动态渲染、可视化配置的方法
动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "
-
vue异步axios获取的数据渲染到页面的方法
我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001
-
Vue实现双向绑定的原理以及响应式数据的方法
一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 2.数组实现响应式: 对于数组则是通过继承重写数组的方法splice.pop.push.shift.unshift.sort.reverse.等可以修改原数组的方式实现响应式的,但是通过length以及直接
-
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
如下所示: specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] } ] <table class="table table-bordered table-hover table-item spggdytable" id="ggxtable" v-show="is
-
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大
随机推荐
- Python 多线程实例详解
- VueJs与ReactJS和AngularJS的异同点
- 点击文章内容处弹出页面代码
- ios多种语言的本地化思路
- iOS App开发中导航栏的创建及基本属性设置教程
- 基于nopCommerce的开发框架 附源码
- 删除PHP数组中头部、尾部、任意元素的实现代码
- CI框架扩展系统核心类的方法分析
- Android实现自定义的弹幕效果
- 详解Docker目录挂载的方法总结
- javaScript中的原型解析【推荐】
- 基于javascript显示当前时间以及倒计时功能
- java实现网页爬虫的示例讲解
- Android触摸事件的应用详解
- 使用PHP会话(Session)实现用户登陆功能
- C#实现绘制浮雕图片效果实例
- DOTNETBAR制作圆角窗体和圆角控件代码实例
- Android使用GestureOverlayView控件实现手势识别
- Nginx的一些常用配置与技巧总结
- 使用numpy和PIL进行简单的图像处理方法