checkbox选中触发事件_Vue模板语法、事件和表单使用

最新推荐文章于 2024-05-30 08:49:26 发布

weixin_39956182

最新推荐文章于 2024-05-30 08:49:26 发布

阅读量7.3k

点赞数 1

模板语法

文本绑定，两个大括号，中间加上data里面的数据，message里面不仅可以是变量还可以是表达式

<body>
    <div id="main">
      // 变量
      {
    { message }}
      <br/>
      // 表达式
      {
    { number + 1}}
    </div>
</body>

<script>
  const vm = new Vue({
    el: '#main',
    data: {
      message: 'Welcome to Chivalrous Island!',
      number: 7
    },
  })
</script>

JS表达式（计算、拼接、只能是单个表达式）
插入HTML代码（慎用！防止XSS攻击），我们可以直接在data里面定义html代码，但是它存在一个安全隐患，比如我们将下面的 dangerHTMl: "<span>0085</span>" 这句代码改变一下 dangerHTML: "<span onclick='alert(0085)'>0085</span>" ，这时候的当我们点击时它执行了它里面的一个代码会弹出一个框，这是很危险的。像很多个XSS攻击就是用的这种方法，所以对于v-html我们还是要慎用。

<div v-html="dangerHTMl"></div>

data: {
    ...
    dangerHTMl: "<span>0085</span>"
}

绑定，把data里面的数据绑定到元素的属性上，最常见的就是id

<div v-bind:id="id" v-html="dangerHTML"></div>

data: {
    ...
    id: 'oldId'
}

当data里面的数据改变时，它的Id也会随之改变。

最低0.47元/天解锁文章

weixin_39956182

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox选中触发事件_Vue模板语法、事件和表单使用

模板语法文本绑定，两个大括号，中间加上data里面的数据，message里面不仅可以是变量还可以是表达式<body> <div id="main"> // 变量 {{ message }} <br/> // 表达式 {{ number + 1}} </div></bo...
复制链接

扫一扫