(十):vue使用js动态绑定数据, v-html解析html代码，动态绑定属性及属性值,循环遍历数组，循环遍历的数组里面是对象,遍历数组里面的对象里面的数组,循环遍历对象

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>&nbsp;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"

      },

}

}