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

博客介绍了Vue中的数据渲染方式,包括使用双大括号直接渲染数据,v-html可解读html标签渲染但要防XSS攻击,v-text用于操作纯文本且为单向绑定,还可简写并支持逻辑运算,此外v-once可与v-text结合实现一次性插值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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'    
 }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值