vue中的dom基本渲染
2024-08-22 17:30:06
一、输出动态标签
请只对可信内容使用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'
}
}
})
最新文章
- ibatis.net 中SqlMaps的xml文件的例子
- SIFT中的尺度空间和传统图像金字塔
- C# Excel处理工具
- python模块介绍- collections(5)-OrderedDict 有序字典
- 嵌入式实时操作系统μCOS原理与实践任务控制与时间的解析
- 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘
- JavaSE复习_5 Eclipse的常见操作
- 转：linux 修改sftp服务默认提供者sshd的session timeout
- boost多边形交集、并集
- AjaxPro框架
- angularjs学习总结一(表达式、指令、模型)
- <算法竞赛入门经典> 第8章 贪心+递归+分治总结
- 使用ObjectInputStream和ObjectOutputStream注意问题
- QBC查询
- IdentityServer4 登录使用数据库
- java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext
- vue页面引入外部js文件遇到的问题
- Flex 布局教程转载
- 在 Element-UI 的 Table 组件上添加列拖拽效果
- tableViewCell上的定时器拖动阻塞