Vue-JSX

基础案例：

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "切换",
      data1: [
        { name: "nam1", age: 12, flag: true },
        { name: "nam2", age: 13, flag: false },
        { name: "nam3", age: 14, flag: true },
        { name: "nam4", age: 15, flag: true }
      ],
      data2: [
        { name: "nam5", age: 16, flag: false },
        { name: "nam6", age: 17, flag: true },
        { name: "nam7", age: 18, flag: false },
        { name: "nam8", age: 19, flag: true },
        { name: "nam9", age: 20, flag: true }
      ],
      data: []
    };
  },
  created() {
    this.data = this.data1;
  },
  methods: {
    changeState() {
      this.data = this.data == this.data1 ? this.data2 : this.data1;
    }
  },
  render() {
    return (
      <div>
        <button onClick={this.changeState}>{this.msg}</button>
        <ul>
         {
           this.data.map((item, index) => {
            return item.flag?
            <li>
              <h1>{item.name}</h1>
            </li>
            :
             <li>
              <h5>{item.name}</h5>
            </li>
          })
         }
        </ul>
      </div>
    );
  }
};
</script>

• 效果图如下

  
  图一.png

案例：递归实现树形组件

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      data: [
        {
          name: "1",
          children: [{ name: "1_1" }, { name: "1_2" }, { name: "1_3" }]
        },
        {
          name: "2",
          children: [{ name: "2_1" }, { name: "2_2" }]
        },
        {
          name: "3",
          children: [
            {
              name: "3_1",
              children: [
                { name: "3_1_1" },
                {
                  name: "3_1_2",
                  children: [
                    { 
                      name: "3_1_2_1",
                      children:[
                        {
                          name:"3_1_2_1_1"
                        }
                      ]
                    },
                    { name: "3_1_2_2" },
                    { name: "3_1_2_3" }
                  ]
                },
                { name: "3_1_3" }
              ]
            }
          ]
        },
        {
          name: "4",
          children: [{ name: "4_1" }, { name: "4_2" }]
        }
      ]
    };
  },
  methods: {
    diguiMethdo(data) {
      return (
        <ul>
          {data.map((item, index) => {
            return item.children ? (
              <div>
                <li onClick={this.test.bind(this, item.name)} id={item.name}>
                  {item.name}
                </li>
                <li>{this.diguiMethdo(item.children)}</li>
              </div>
            ) : (
              <li>{item.name} </li>
            );
          })}
        </ul>
      );
    },
    test(info) {
      let p = document.getElementById(info);
      let p2 = p.parentNode.childNodes[1];
      p2.style.display = p2.style.display == "none" ? "inline" : "none";
    }
  },
  render() {
    return (
      <div class="clearfix" id="box">
        {this.diguiMethdo(this.data)}
      </div>
    );
  }
};
</script>
<style>
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}

#box {
  float: left;
  height: 100%;
  width: 200px;
  background-color: aquamarine;
}
li {
  list-style: none;
}
</style>

• 效果图如图二

  
  图二.png

Vue-jsx参考