js對頁面數據進行動態綁定:
1：js動態綁定數據
//html代碼渲染:
{{ msg }}
//js業務邏輯的data里面的代碼
export default {
name: "App",
data(){
return {
msg: "000",
}
}
}
2：js動態綁定html代碼
<span v-html="sh"></span>
//js業務邏輯的data里面的代碼
data(){
return {
sh: "<span> yes,ido</span>",
}
}
3：js動態綁定對象
{{ userinfo.username }} {{ userinfo.age }}
//js業務邏輯的data里面的代碼
data() {
return {
userinfo: {
username: "張三",
age: "20",
},
}
}
4:js動態綁定屬性和屬性值，綁定如下，v-bind可以省略
<!-- src="../src/assets/png1.png" -->
<img v-bind:src="logsc" />
<a v-bind:[myhref]="'https://www.baidu.com/'" target="blank">跳轉到百度</a>
<a v-bind:[myhref]="mylink" target="blank">跳轉到百度</a>
<div v-bind:title="titlea">鼠標放上去后彈出title</div>
//js業務邏輯的data里面的代碼
data() {
return {
logsc: "http://192.168.2.117:8080/img/png1.ea9ea2cb.png",
myhref: "href",
mylink: "https://www.baidu.com/",
titlea: "彈出title信息",
}
}
5：循環遍歷數組里面的字符串，vue3.x以后每個v-for后面必須要要對應的key標識,不然會報錯
<!--模板template里面的html代碼 -->
<ul>
<li
v-for="(item, index) in list1"
v-bind:key="index"
style="list-style: none; width: 120px"
>
{{ item }}--{{ index }}
</li>
</ul>
//js把業務邏輯得數據渲染到頁面上
data() {
return {
list1: ["list1", "list2", "list3"],
}
}
6：循環遍歷數組里面的對象
<!--模板template里面的html代碼 -->
<ul>
<li
v-for="(item, index) in list2"
v-bind:key="index"
style="list-style: none; width: 120px"
>
{{ item.title }}--{{ index }}
</li>
</ul>
//js把業務邏輯得數據渲染到頁面上
data() {
return {
list2: [{ title: "新聞1" }, { title: "新聞2" }, { title: "新聞3" }],
}
}
6：循環遍歷數組里面對象里面的的數組對象(嵌套數組)
<!--模板template里面的html代碼 -->
<ul>
<li
v-for="(item, index) in list3"
v-bind:key="index"
style="list-style: none; width: 300px"
>
{{ item.cate }}
<ol >
<li style="list-style: none; width: 300px" v-for="(childitem,index1) in item.list" :key="index1">
{{ childitem.title }}--{{index1}}
</li>
</ol>
</li>
</ul>
//js把業務邏輯得數據渲染到頁面上
data() {
return {
list3: [
{
cate: "國內新聞",
list: [{ title: "國內新聞1111" }, { title: "國內新聞2222" }],
},
{
cate: "國際新聞",
list: [{ title: "國際新聞1111" }, { title: "國際新聞2222" }],
},
],
}
}
7：循環遍歷對象，可以動態綁定對象的屬性名稱和屬性值，value屬性值，attr屬性名稱，index索引序號，循環的方式和循環數組的方式類似
<!--模板template里面的html代碼 -->
<ul>
<li v-for="(value,attr,index) in myobject" v-bind:key="index" style="list-style: none; width: 300px">
{{attr}}--{{value}}--{{index}}
</li>
</ul>
//js把業務邏輯得數據渲染到頁面上
data() {
return {
myobject:{
title:"how todo",
author:"janedoe",
publishedat:"2020-02-03"
},
}
}