vue 02-上

时间:2019-06-18
本文章向大家介绍vue 02-上,主要包括vue 02-上使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行

    典型案例todolist

        computed:{
            计算属性: function(){return 返回值}        使用: {{计算属性}}
        }

        与method的区别: 方法会每次调用,计算属性不会
            计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的
            方法:适合在列表渲染使用,强制渲染执行


        计算属性:计算属性也可以是个对象
            读取了属性 -> get:fn
            修改了属性 -> set:fn

<body>
  
  <div id="example-5">
    {{ cptStr }}
  </div>

  <script>
    let vm = new Vue({
      el: '#example-5',
      data: {
        str: 'i love you',
      },
      computed:{
        /* cptStr(){
          return this.str.split(' ').reverse().join(' ')
        } */
        cptStr:{
          get: function(){
            console.log('get')
            return this.str.split(' ').reverse().join(' ')
          },
          
          set: function(val){
            this.str = val;
            console.log('set')
          }
        }
      }
    })
  </script>

</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变

2、样式的操作

class操作/style操作:
        v-bind:class="数据|属性|变量|表达式"
              :class/style = " 数据 "     数据类型:字符/对象 / 数组
              :class="{类名:true,类名2:false}"  布尔值决定样式是否使用
              :style="[{css属性名:值},{css属性名小驼峰:值}]"

<body>

    <div id="app">

      <!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
      <!-- class动态绑定 -->
      <h4>class动态绑定</h4>

      <a class="btn btn-primary" href="#">按钮1</a>
      <a href="#" :class="cl1">按钮2</a>
      <!-- <a :class=" cl1 " href="#">按钮2</a> -->
      <a :class=" 'btn btn-primary' " href="#">按钮3</a>
      <a :class=" {btn:false,'btn-primary':true} " href="#">按钮4</a>
      <a :class=" [{btn:false},{'btn-primary':true}] " href="#">按钮5</a>

      <!-- style动态绑定 -->
      <h4>style动态绑定</h4>
      <!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
      <a class="btn btn-primary" :style=" 'background:red' " href="#">按钮1</a>
      <!-- <a class="btn btn-primary" :style=" {background:'red',height:'50px'} " href="#">按钮2</a> -->
      <!-- <a class="btn btn-primary" :style=" [{background:'red'},{height:'50px',width:'120px'}] " href="#">按钮3</a> -->

    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          cl1:'btn btn-primary'
        }
        
      })
    </script>
      
  </body>

原文地址:https://www.cnblogs.com/sansancn/p/11047451.html