vue学习笔记（二）

1. 通过属性绑定v-bind为元素设置class样式

    一共有以下几种方法：

   1.1   直接传递一个数组

   1.2   数组中使用三元表达式

   1.3   在数组中使用对象代替三元表达式

   1.4   直接使用对象

代码如下：

<style>
   .red {
       color: red;
   }
   .thin {
       font-weight: 200;
   }
   .italic {
       font-style: italic;
   }
   .active {
       letter-spacing: 0.2em;
   }
</style>

  <div id="app">
        <!-- 传统写法 -->
        <h1 class='red thin'>冲冲冲！</h1>
        <!-- 1. 直接传递一个数组 -->
        <h1 :class="['red', 'thin', 'italic']">冲冲冲！</h1>
        <!-- 2. 数组中使用三元表达式 -->
        <h1 :class="['red', 'thin', flag ? 'active' : '']">冲冲冲！</h1>
        <!-- 3. 在数组中使用对象代替三元表达式 -->
        <h1 :class="['red', 'thin', {'active': flag}]">冲冲冲！</h1>
        <!-- 4. 直接使用对象 -->
        <h1 :class="{italic: true, thin: false, active: true}">冲冲冲！</h1>
        <h1 :class="classObj">冲冲冲！</h1>
  </div>

  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              flag: true,
              classObj: {italic: true, thin: false, active: true}
          }
      })
  </script>

界面效果：

 

2. v-for 可以循环普通数组、对象数组、对象和数字，下面两个例子是循环对象和迭代数字：

  2.1 循环对象：

    <div id="app">
        <h1 v-for="(val, key, i) in list">键: {{key}} 值: {{val}} 索引: {{i}}</h1>
    </div>
    <script>
      var vm = new Vue({
          el: '#app',
          data: {
              list: {
                  id: 1,
                  name: "郭富城",
                  gender: "男"
              }
          }
      })
    </script>

 

   2.2 迭代数字：从1开始

<p v-for="count in 10">这是第{{count}}次</p>

 

 3. 过滤器

   vue.js支持自定义一些过滤器，可以格式化文本。用在两个地方：mustahc插值、v-bind

   过滤器的语法：

Vue.filter("过滤器名称", (data) => { // 第一个参数是管道前面传来的数据
     return data + 123;
})

   过滤器调用的格式：

 {{ name | 过滤器名称 }}

  示例：

  <div id="app">
        <h1>{{ msg | reverse}}</h1>
  </div>

 

  <script>
      Vue.filter('reverse', (data) => {
          return data.replace(/[\d]/g, '*')
      })
      var vm = new Vue({
          el: '#app',
          data: {
              msg: "12345白天不懂夜的黑54321"
          }
      })
  </script>  

效果如下：

 

 过滤器可以传多个参数：

  <div id="app">
        <h1>{{ msg | format('哈', '嘿')}}</h1>
  </div>

  Vue.filter('format', (data, arg, arg2) => {
        return data.replace(/[\d]/g, arg + arg2)
  })

    var vm = new Vue({

        el: '#app',

        data: {

            msg: "12345白天不懂夜的黑54321"

        }

    })

效果如下：

过滤器可以多次调用，按顺序对原数据进行处理：

  <div id="app">
      <h1>{{ msg | format('哈', '嘿') | test('++++++') }}</h1>
  </div>

  Vue.filter('test', (data, arg) => {
       return data + arg;
  })

效果如下：