一、输出动态标签
请只对可信内容使用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'
}
}
})

vue中的dom基本渲染的更多相关文章

  1. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  2. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  3. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  4. Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

  5. vue 中数据没有同步渲染的解决方法

    今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...

  6. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  7. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  8. vue中的dom指令控制

    一.条件控制指令1.v-if,条件渲染 <div id="J_app"> <p v-if="show">显示该标签</p> ...

  9. vue中关于dom的操作

    mounted 个人理解为DOM结构准备就绪了,可以开始加载vue数据了, 挂载点,配合使用 mounted:function(){ this.$nextTick(function(){ //this ...

随机推荐

  1. 配置使用OpenCV静态链接库

    配置opencv静态链接库需要用到:staticlib 在配置链接器->附加库目录时应该为staticlib的路径.同理若是利用动态链接库则只需要lib的路径: 动态链接库则使用lib,然而在使 ...

  2. centos6.5 nfs实时共享

    一.什么时NFS NFS(Network File System)——网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,NF ...

  3. 内核中 subsys_initcall 以及初始化标号

    今天在看内核中无线的实现时,发现一个调用 subsys_initcall(cfg80211_init);搜索一些资料: subsys_initcall 的定义在 include/linux/init. ...

  4. C#控制台中创建数据库连接

    与数据库的连接主要有以下三种类: sqlconnection:数据库连接类: sqlcommand:数据库操作: sqldatareader:数据库读取: SqlDataReader dr = cmd ...

  5. xpath定位

    XML 实例文档 我们将在下面的例子中使用这个 XML 文档. <?xml version="1.0" encoding="ISO-8859-1"?> ...

  6. Oracle查询表主键、外键

    项目中用到的一些Sql(oracle下的)总结: 1.查找表的所有索引(包括索引名,类型,构成列) select t.*,i.index_type from user_ind_columns t,us ...

  7. 对以内部 git 仓库为 composer 依赖的 package,加上版本号

    现实问题 之前同事做了一个 composer package,做为公司大量 laravel 项目的通用模块. 但是,在实际使用中,每个项目对改 package 的依赖版本是有所不同的.否则 compo ...

  8. Python 定值类

    1.__str__和__repr__ 如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class Person(object): def __init__(self, nam ...

  9. python 全栈开发,Day24(复习,__str__和__repr__,__format__,__call__,__eq__,__del__,__new__,item系列)

    反射: 使用字符串数据类型的变量名来使用变量 wwwh即what,where,why,how  这4点是一种学习方法 反射 :使用字符串数据类型的变量名来使用变量 1.文件中存储的都是字符串 2.网络 ...

  10. 自己实现一个和PYTHON的库一模一样的sha_256算法

    同时在看一本书<从零开始-自己动手写区块链>, 这书讲得易懂,我也动手实践一下. 这个算法和python3本身的实现相同, 所以,同样的字串,摘要是相同的. import struct i ...