vue2中使用jsx基础

1、基本的模板

<script lang="jsx">
export default {
   
  name: 'demo1',
  // 数据定义
  data() {
   
    return {
   
      info: {
   
        age: 18,
      }
    }
  },
  created() {
   

  },
  methods: {
   
  },
  render() {
   
    return (
      <div>
        <div>我是小明，今年{
   this.info.age}</div>
      </div>
    )
  }
}
</script>
<style lang="scss">
</style>

2、方法、v-if、v-show、v-for 用法

下面一个示例包含一些基础的方法使用、v-if的用法、v-show、v-for的使用， 这里就偷个懒了，不挨个拆分来细讲了。 示例还是很详细的

<script lang="jsx">
const customers = {
   
  name: 'demo1',
  // 数据定义
  data() {
   
    return {
   
      info: {
   
        age: 18,
        gender: '',
        list: [
          {
    name: '张三', age: '18', gender: '女'},
          {
    name: '李四', age: '28', gender: '男'}
        ]
      },
      loginForm: {
   
        username: ''
      }

    }
  },
  created() {
   

  },
  methods: {
   
    /**
     *  改变性别的方法
     *  这里踩坑 ---- 建议在render函数中传参的时候，箭头函数带上event. 这样不传参数的方法得到val就是正常的undefined
     *  如果不带event, 不传参数的方法得到val会被转义， 从而v-if,v-show 在使用的过程中，针对没有数值的场景就会有bug
     *  */
    editGender(event,val) {
   
      console.log(event, val, 'eee')
      this.info.gender = val
    },
    // v-if 的第三种写法，函数返回
    getGender() {
   
      console.log(this.info.gender, '99')
      return this.info.gender ? (this.info.gender === '男' ?  <div>我是boy</div> : <div>我是girl</div>) : ''
    }
  },
  render() {
   
    return (
      <div>
        <div>我是小明，今年{
   this.info.age}</div>
        <el-button type="primary" onClick={