vue中的dom基本渲染

一、输出动态标签
请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值，容易导致xss攻击。

<div id="J_app"><div v-html="rawHtml"></div>
</div>
var vapp = new Vue({el: '#J_app',data: {rawHtml:'<p>输出标签和内容</p>'}
})

二、输出动态文本内容

<div id="J_app"> {{ info }} </div>
var vapp = new Vue({el: '#J_app',data: {info: 'Hello Vue!'}
})

三、输出标签的id属性动态值

<div id="J_app"><span v-bind:id="dynamicId">这个标签的id是动态的</span><span :id="dynamicId">v-bind缩写，这个标签的id是动态的</span>
</div>
var vapp = new Vue({el: '#J_app',data: {dynamicId: 'J_tab'}
})

四、输出标签的title属性动态值

<div id="J_app"><span v-bind:title="labelTitle">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span><span :title="labelTitle">v-bind缩写，鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
var vapp = new Vue({el: '#J_app',data: {labelTitle: '页面加载于 ' + new Date().toLocaleString()}
})

五、输出标签的class属性动态值

1、对象写法

<div id="J_app"><div class="initCls" v-bind:class="{ cls1: isCur, 'cls-2': hasError }">对象写法</div>
</div>
var vapp = new Vue({el: '#J_app',data: {isCur: true,hasError: false}
})

<div id="J_app"><div v-bind:class="classObject">对象写法</div>
</div>
var vapp = new Vue({el: '#J_app',data: {classObject: {cls1: true,'cls-2': false}}
})

<div id="J_app"><div v-bind:class="classObject">对象写法</div>
</div>
var vapp = new Vue({el: '#J_app',data: {isCur: true,hasError: false},computed: {classObject: function () {return {cls1: this.isCur && !this.hasError,'cls-2': this.hasError}}}
})

2、数组写法

<div id="J_app"><div v-bind:class="[classone, classtwo]">数组写法</div>
</div>
var vapp = new Vue({el: '#J_app',data: {classone: 'cls1',classtwo: 'cls-2'}
})

<div id="J_app"><div v-bind:class="[isCur ? classone : '', classtwo]">数组写法，三目运算符</div>
</div>
var vapp = new Vue({el: '#J_app',data: {isCur: true,classone: 'cls1',classtwo: 'cls-2'}
})

<div id="J_app"><div v-bind:class="[{ cls1: isCur }, classtwo]">数组写法，内嵌对象</div>
</div>
var vapp = new Vue({el: '#J_app',data: {isCur: true,classtwo: 'cls-2'}
})

六、输出标签的style属性动态值

<div id="J_app"><div v-bind:style="{ color: activeColor, fontSize: fontNum + 'px' }">style属性</div>
</div>
var vapp = new Vue({el: '#J_app',data: {activeColor: 'red',fontNum: 30}
})

<div id="J_app"><div v-bind:style="styleObject">style属性</div>
</div>
var vapp = new Vue({el: '#J_app',data: {styleObject: {color: 'red',fontSize: '30px'}}
})

转载于:https://www.cnblogs.com/camille666/p/vue_dom_base_using.html

vue中的dom基本渲染相关推荐

Vue中虚拟DOM的理解
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这 ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
Vue 中强制组件重新渲染的正确方法
作者:Michael Thiessen 译者:前端小智来源:hackernoon 有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
在vue中获取dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template><div><div id=& ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

vue中的dom基本渲染

vue中的dom基本渲染相关推荐

最新文章

热门文章