vue基础：数据绑定，绑定属性，循环渲染

傷城~ 2022-03-25 06:46 276阅读 0赞

<template>
      <div id="app">
        <h2>你好vue{
       {msg}}</h2>/*数据绑定*/
        <br>
        <h3>{
       {obj.name}}</h3>/*绑定属性*/
        <br>
        <hr>
        <ul>/*循环渲染*/
          <li v-for="a in list">
              {
       {a}}
          </li>
        </ul>
        <br>/*多重循环*/
        <hr>
        <ul>
          <li v-for="a in list1">
              {
       {a.title}}
          </li>
        </ul>
        <br>
        <hr>
        <ul>
          <li v-for="a in list2">
              {
       {a.cate}}
              <ol>
                  <li v-for="aa in a.list">
                  {
       {aa.title}}
                  </li>
              </ol>
          </li>
        </ul>
        
    
      </div>
    </template>
    
    <script> export default { data(){ return{ msg:'你好vue', obj:{ name:"张三" }, list:['111','222','333'], list1:[ { 'title':'111'}, { 'title':'222'}, { 'title':'333'}, { 'title':'444'}, ], list2:[ { 'cate':'国内新闻', 'list':[ { 'title':'国内新闻111'}, { 'title':'国内新闻111'} ] },{ 'cate':'国外新闻', 'list':[ { 'title':'国外新闻222'}, { 'title':'国外新闻222'} ] } ] } } } </script>
    
    <style> </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]  
可以查看官方文档，查找需求（如循环渲染）[官方文档][Link 1]（谷歌浏览器可右击页面，翻译中文）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220325/4f0a7c9f96a344339cc06f7915c2a53d.png
[Link 1]: https://vuejs.org/v2/guide/list.html