vue框架:v-text/v-html指令属性基本使用的区别
插值表达式与v-text/v-html的区别
a.对于元素中已经存在的值,只有插值表达式能够将原有的值保留,在原有的已经存在的值的基础上添加动态数据。
使用v-text和v-html之所谓不能够保留元素标签对中原有的内容,是因为在使用以上两个指定属性之前,会提前将标签对中的内容先清空掉,再赋予动态的值。如果在未来的实际项目开发,需求为在原有的内容的基础上,追加动态的值,我们要选择使用插值表达式。
从另一个方面来看,插值表达式虽然会出现{{}}页面闪烁的现象(v-text和v-html不会出现页面闪烁的情况),但是对于原有内容的保留,只有插值表达式能够完成,所以插值表达式具有不可替代的优势。
对比v-text和v-html
v-text:主要是用来赋予纯内容的,如果赋予到元素中的内容本身包含html,那么v-text会将html原封不动的展现在页面上,这些内容是得不到浏览器解析的。
v-html:除了能够为前端元素赋予内容之外,更重要的是,如果内容本身含有html代码,那么赋值后最终展现出来的结果,html元素是会得到浏览器解析的.
从以上结果判断,v-html的功能更加强大,对于前端页面的展现,不可能让使用该系统的用户看到任何html代码,而是应该让用户看到解析后的html效果。所以在实际项目开发中,使用v-html的概率要高于v-text.
另外使用插值表达式的效果,与v-text是一样的,内容中的html代码时得不到浏览器的解析的。
点击查看演示
a.对于元素中已经存在的值,只有插值表达式能够将原有的值保留,在原有的已经存在的值的基础上添加动态数据。
使用v-text和v-html之所谓不能够保留元素标签对中原有的内容,是因为在使用以上两个指定属性之前,会提前将标签对中的内容先清空掉,再赋予动态的值。如果在未来的实际项目开发,需求为在原有的内容的基础上,追加动态的值,我们要选择使用插值表达式。
从另一个方面来看,插值表达式虽然会出现{{}}页面闪烁的现象(v-text和v-html不会出现页面闪烁的情况),但是对于原有内容的保留,只有插值表达式能够完成,所以插值表达式具有不可替代的优势。
对比v-text和v-html
v-text:主要是用来赋予纯内容的,如果赋予到元素中的内容本身包含html,那么v-text会将html原封不动的展现在页面上,这些内容是得不到浏览器解析的。
v-html:除了能够为前端元素赋予内容之外,更重要的是,如果内容本身含有html代码,那么赋值后最终展现出来的结果,html元素是会得到浏览器解析的.
从以上结果判断,v-html的功能更加强大,对于前端页面的展现,不可能让使用该系统的用户看到任何html代码,而是应该让用户看到解析后的html效果。所以在实际项目开发中,使用v-html的概率要高于v-text.
另外使用插值表达式的效果,与v-text是一样的,内容中的html代码时得不到浏览器的解析的。
点击查看演示