vue学习之插值的五种方式

最新推荐文章于 2023-08-30 21:51:38 发布

VIP文章囧大人。

最新推荐文章于 2023-08-30 21:51:38 发布

阅读量981

点赞数

本文链接：https://blog.csdn.net/weixin_42565757/article/details/109196191

版权

插值

文本

数据绑定最常见的方式就是使用{ {...}}进行文本插值：

<body>
    <div id = "app">
        {
  {name}}{
  {age}}
    </div>
    <script>
            var app = new Vue({
                el:'#app',
                data:{
                    name:'lisi',
                    age:18
                }
            })
    </script>
</body>

html

使用v-html指令进行输出html代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>h1标题</h1>'
  }
})
</script>

v-html会将文本中的具有html结构的解析成标签

属性

为元素绑定属性使用v-bin

最低0.47元/天解锁文章

优惠劵

囧大人。

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习之插值的五种方式

插值文本数据绑定最常见的方式就是使用{{...}}进行文本插值：<body> <div id = "app"> {{name}}{{age}} </div> <script> var app = new Vue({ el:'#app', data:{ name:'lisi',
复制链接

扫一扫