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

js对页面数据进行动态绑定:

1：js动态绑定数据

//html代码渲染: {{ msg }} //js业务逻辑的data里面的代码 export default { name: "App", data(){ return {       msg: "000", } } } 2：js动态绑定html代码 //js业务逻辑的data里面的代码 data(){ return {     sh: " yes,ido", } } 3：js动态绑定对象  {{ userinfo.username }} {{ userinfo.age }} //js业务逻辑的data里面的代码 data() { return {    userinfo: {         username: "张三",         age: "20",       },   } } 4:js动态绑定属性和属性值，绑定如下，v-bind可以省略 跳转到百度 跳转到百度 //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标识,不然会报错  

   
•       {{ item }}--{{ index }}    
 

 //js把业务逻辑得数据渲染到页面上

data() {     return {     list1: ["list1", "list2", "list3"], } } 6：循环遍历数组里面的对象

   
•       {{ item.title }}--{{ index }}    
 

//js把业务逻辑得数据渲染到页面上

data() { return {       list2: [{ title: "新闻1" }, { title: "新闻2" }, { title: "新闻3" }], } } 6：循环遍历数组里面对象里面的的数组对象(嵌套数组)  

   
•  >       {{ item.cate }}      
           
  1.              {{ childitem.title }}--{{index1}}          
       
     
 

//js把业务逻辑得数据渲染到页面上

data() { return { list3: [         {           cate: "国内新闻",           list: [{ title: "国内新闻1111" }, { title: "国内新闻2222" }],         },         {           cate: "国际新闻",           list: [{ title: "国际新闻1111" }, { title: "国际新闻2222" }],         },       ], } }

 7：循环遍历对象，可以动态绑定对象的属性名称和属性值，value属性值，attr属性名称，index索引序号，循环的方式和循环数组的方式类似

 

   
•       {{attr}}--{{value}}--{{index}}    
 

 //js把业务逻辑得数据渲染到页面上

data() { return { myobject:{         title:"how todo",         author:"janedoe",         publishedat:"2020-02-03"
      }, } }