用原生js是如何实现使用 {{data}}方式 输出

vue.js使用 {{data}}方式 输出,是什么原理?
用原生js是如何实现的?

2个回答

js直接正则替换就行了吧,vue应该也是分析出此类标签后执行替换

 <div id="div1"> {{data}},姓名:{{name}},年龄:{{age}}</div>
<script>
    var data = { data: "123", name: "csdn", age: "xxoo" }
    div1.innerHTML = div1.innerHTML.replace(/\{\{([\s\S]+?)\}\}/g, function ($0,$1) {return data[$1]||'' })
</script>

这个是vue的模板语法,vue会对template里面的内容做compile,其实就是再js的基础上设计了一套新的模板语法。
在编译的过程中对这个表达式求值,最终得到结果。
具体的实现可以参照eval函数的实现

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问