本文目录一览:
web前端vue实现插值文本和输出原始html
Vue.js
使用了基于
HTML
的模板语法,允许开发者声明式地将
DOM
绑定至底层
Vue
实例的数据。所有
Vue.js
的模板都是合法的
HTML
,所以能被遵循规范的浏览器和
HTML
解析器解析。
在vue里最常见的数据绑定是使用“Mustache”语法
(双大括号)
的文本插值:
spanMessage:
{{
value
}}/span
//
插值文本
无论何时,绑定的数据对象上
value
属性发生了改变,页面上都会响应的做出重新渲染。
或者有时候只是想更新一次,不想每次都更新数据了页面也重新渲染,可以通过
v-once指令也能实现一次性的更新:
span
v-once这个将不会改变:
{{
value
}}/span
//
value的值改变了一次后,第二次改变时就不会再重新渲染页面
有时候你插入的不是单单一个文本时,比如一个富文本的值时,它包含了各种文本值和各种原始的html的标签,要完整的显示到页面上,就得使用v-html的指令:
template
div
v-html="htmlvalue"/div
//
调用显示富文本,将会按照原始的html显示
/template
script
export
default
{
data(){
return{
htmlvalue:
'span
style="color:red;"the
should
be
red/span'
//
比如:这是一个富文本的值
}
}
}
/script
注意:你的站点上动态渲染的任意
HTML
可能会非常危险,因为它很容易导致XSS
攻击。请只对可信内容使用
HTML
插值,
绝不要
对用户提供的内容使用插值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue模板语法-插值详解
vue中js-cookie中怎么销毁所有的cookie
设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问,以防范跨站脚本攻击(XSS)。
至于为什么这个值会变化,这是跟后端的session机制有关。当你浏览一个网页时,服务端随机产生一个字符串,然后存在你cookie中。当你下次访问时,cookie 会带有这个字符串,由于字符串是随机产生的,而且位数足够多,所以也不担心有人能够伪造。
vue是什么 怎么用
Vue.js是一套构建用户界面的渐进式框架,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
1、MVVM即model,view,viewmodel,它是数据驱动模式,即所有的一切通过操作数据来进行,而尽量避免操作dom树。
2、用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作,而是专心于对用户的操作进行处理,避免了MVC中control层过厚的问题。
扩展资料:
vue在web开发、网站制作中的优势
1、据绑定:vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染 。
2、组件式开发:通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。
3、简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
参考资料来源:百度百科-Vue.js