pp 总结二

1. return false   ES6函数的扩展：箭头函数  数组 arr.map()   arr.filter() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var o = {
      num (a) {
          if(a>4){
              a=1;
              return false;   // return false 表示 不执行了。
          }
          a=10;
          return a;
      }
  }
  console.log(o.num(21));   //  false
  var arr = [1,2,3];
  console.log(arr.map(x => x * x));  // 相当于for循环
  console.log(arr.filter(x => x > 1)); // 过滤条件  把x>1的过滤出来 【2，3】

  //函数的扩展，箭头函数
  var f = x=>x*12;
  console.log(f(2));
  var f2 = ()=>10;
  console.log(f2());
  var f3 = (a,b)=>a+b;
  console.log(f3(4, 5));


</script>


</body>
</html>
View Code

2.  Test.vue   TestOne.vue 路由传值等

Test.vue

<template>
  {{mes}}
  <button @click="test">btn</button>
  <group>
    <x-input
      title='名字'
      placeholder='请输入你的名字'
      :value.sync="name">
    </x-input>
    <x-input
      title='爱好'
      placeholder='请输入你的爱好'
      :value.sync="hobby">
    </x-input>
    <x-button type="primary" @click="goToTestOne">立即申请</x-button>
  </group>
  <div>
    <img :src="arrowSrc" alt="">
    <p :class="{'red-font':isRed}">红色字体</p>
  </div>
</template>
<style>
  .red-font{color:red;}
</style>

<script>
  export default{
    components: {
      Group: require('vux-components/group'),
      XInput: require('vux-components/x-input'),
      XButton: require('vux-components/x-button')

    },
    data () {
      return {
        name: '',
        hobby: '',
        mes: '123234',
        arrowSrc: require('../assets/images/helper/help-arrow-down.png'),
        isRed: true
      }
    },
    methods: {
      test () {
//        this.$data.mes = '456'
        this.$set('mes', '中国')    //   两种写法
      },
      goToTestOne () {
//        this.$router.go('/testOne')
        this.$router.go({path: '/testOne', query: {name: this.$data.name, hobby: this.$data.hobby}})
      }
    }
  }
</script>
Test.vue

TestOne.vue

<template>
  {{mes}}
  <p>{{name}}</p>
  <p>{{hobby}}</p>
</template>

<script>
  export default{
    data () {
      return {
        name: '',
        hobby: '',
        mes: '123234'
      }
    },
    created () {          //  用  create ()
      this.$data.name = this.$route.query.name        // 注意这里是 $route  没有'r'
      this.$data.hobby = this.$route.query.hobby
    }
  }
</script>
TestOne.vue

 3. 判断 变量 a 是否未定义 undefined

<script>
  if (typeof(a) !== 'undefined') {
    console.log(a);
  } else {
    console.log(111);
  }
  </script>
View Code
// good
if (typeof person === 'undefined') {
  ...
}
View Code

4.限制 Input 只能输入  a-zA-Z0-9 - /\ 汉字等

@keyup="validInput()"
    
    validInput () {
        this.$data.address = this.$data.address.replace(/[^A-Za-z0-9\u4e00-\u9fa5\\_\/\.\-()·]/, '')
      }
View Code

 

posted @ 2016-12-25 21:08  gyz418  阅读(159)  评论(0)    收藏  举报