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'
}
}
})
vue中的dom基本渲染的更多相关文章
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- [记录] Vue中的dom操作
使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...
- Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- vue中的dom指令控制
一.条件控制指令1.v-if,条件渲染 <div id="J_app"> <p v-if="show">显示该标签</p> ...
- vue中关于dom的操作
mounted 个人理解为DOM结构准备就绪了,可以开始加载vue数据了, 挂载点,配合使用 mounted:function(){ this.$nextTick(function(){ //this ...
随机推荐
- 配置使用OpenCV静态链接库
配置opencv静态链接库需要用到:staticlib 在配置链接器->附加库目录时应该为staticlib的路径.同理若是利用动态链接库则只需要lib的路径: 动态链接库则使用lib,然而在使 ...
- centos6.5 nfs实时共享
一.什么时NFS NFS(Network File System)——网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,NF ...
- 内核中 subsys_initcall 以及初始化标号
今天在看内核中无线的实现时,发现一个调用 subsys_initcall(cfg80211_init);搜索一些资料: subsys_initcall 的定义在 include/linux/init. ...
- C#控制台中创建数据库连接
与数据库的连接主要有以下三种类: sqlconnection:数据库连接类: sqlcommand:数据库操作: sqldatareader:数据库读取: SqlDataReader dr = cmd ...
- xpath定位
XML 实例文档 我们将在下面的例子中使用这个 XML 文档. <?xml version="1.0" encoding="ISO-8859-1"?> ...
- Oracle查询表主键、外键
项目中用到的一些Sql(oracle下的)总结: 1.查找表的所有索引(包括索引名,类型,构成列) select t.*,i.index_type from user_ind_columns t,us ...
- 对以内部 git 仓库为 composer 依赖的 package,加上版本号
现实问题 之前同事做了一个 composer package,做为公司大量 laravel 项目的通用模块. 但是,在实际使用中,每个项目对改 package 的依赖版本是有所不同的.否则 compo ...
- Python 定值类
1.__str__和__repr__ 如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class Person(object): def __init__(self, nam ...
- python 全栈开发,Day24(复习,__str__和__repr__,__format__,__call__,__eq__,__del__,__new__,item系列)
反射: 使用字符串数据类型的变量名来使用变量 wwwh即what,where,why,how 这4点是一种学习方法 反射 :使用字符串数据类型的变量名来使用变量 1.文件中存储的都是字符串 2.网络 ...
- 自己实现一个和PYTHON的库一模一样的sha_256算法
同时在看一本书<从零开始-自己动手写区块链>, 这书讲得易懂,我也动手实践一下. 这个算法和python3本身的实现相同, 所以,同样的字串,摘要是相同的. import struct i ...