欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue.js指令2

程序员文章站 2022-05-15 22:47:46
...

vue.js指令2

v–clock解决插值闪烁问题有点麻烦,有一种更简便的方法:v-text

<div id="app">
<p v-clock>{{msg}}
<p v-text="msg">

结果一样,页面元素也一样。
但是还是有区别的

<div id="app">
<p clock>这是从对象中获得的数据:{{msg}}</p>
<p v-text="msg">这是从对象中获得的数据:</p>

结果就是:
这是从对象中获得的数据:xxx
xxx
结论:插值表达式可以把vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示vue对象传递过来的数据,会替换掉节点里已有的内容
如果我们展示的数据包含元素标签或者样式,如

元素内容,该如何进行渲染?这个时候我们可以用另一个指令v-html

<div v-html="msg"></div>
msg:'<p>这是一个带走元素标签的字符串</p>'
相关标签: 笔记