Vue有什么特性,相对于其他框架都有那些优势!

Vue中的数据渲染都有那些!

  • {{}}
    vue可以直接直接使用双大括号来进行渲染数据
 <div id="app">{{ message }}</div>
var vm = new Vue({
  el: '#app',
  data:{
        message:"我很帅"
    }
})
  • v-html
    v-html是可以解读html标签渲染

 <div id="app" v-html='message'>
    <input type="text"/>
    <div >{{ message }}</div>
 </div>

**你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。


var vm = new Vue({
  el: '#app',
  data:{
        message:"<div style='background:red;width:50px;height:50px'></div>"
    }
})
  • v-text
    v-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。其中:v-text可以简写为{{}},并且支持逻辑运算。

<div id="app">{{ message }}</div>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})
  • v-once
    vue中有个指令叫做 v-once 可以通过v-once与v-text结合,实现仅执行一次性的插值
    <span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

猜你喜欢

转载自blog.csdn.net/qq_41988143/article/details/82154447