Vue学习笔记27--v-html

1.v-bind:单向绑定解析表达式，可简写为 :xxx

2.v-model:双向数据绑定

3.v-for:遍历数组、对象、字符串

4.v-on:绑定事件监听，可简写为 @

5.v-if:条件渲染——动态控制节点是否存在

6.v-else：条件渲染——动态控制节点是否存在

7.v-show：条件渲染——空调控制节点是否展示

8.v-text:

.作用：向其所在的节点中渲染文本内容

.与插值语法的区别：v-text会替换掉节点中的内容，而{{xxx}}不会

v-html

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
- v-html会替换掉节点中所有的内容，插值语法则不会
- v-html可以失败html结构
验证注意问题：v-html有安全性问题
- 在五年工作上动态渲染任意html是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-text|v-html</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h3>
      v-text:不支持结构解析
      v-html：支持结构解析
    </h3>
    <div v-text="name"></div>
    <div v-text="str"></div>
    <div v-html="str"></div>
  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'v-text 学习笔记',
      str: '<h3>我心待明月明月照沟渠</h3>'
    },

  })
</script>

posted on 2024-03-01 10:52 sunwugang 阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告