vue知识小结

本篇文章是个人在学习vue过程中自己总结的心得体会，不一定准确。

1. filters 过滤器

<div id="app">
       <input type="text" v-model="msg">
       <p>反转数据为：{{msg | reverseWord | upCaseWord}}</p>
       <p>小写{{msg | lowcase}}</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script>
       //全局过滤器  第一个参数是函数名  第二个参数是函数
       Vue.filter('lowcase', (val) => val.toLowerCase())

       var app = new Vue({
           el: "#app",
           data: {
               msg: '',
               price: 0
           },
           //局部过滤器  
           filters: {
               reverseWord(val) {
                   return val.split('').reverse('').join('')
               },
               upCaseWord(val) {
                   return val.toUpperCase()
               },
           },
       })
   </script>

注意：全局过滤器的关键字为filter，局部过滤器的关键字为filters

2. v-show 控制组件的显示和隐藏，vishow=true，表示组件显示，v-show=false，表示组件隐藏
3. 通过:class控制样式

<li :calss="index==0? 'cur' : ''" @click="index=0"></li>
 <li :calss="index==1? 'cur' : ''" @click="index=1"></li>
  <li :calss="index==2? 'cur' : ''" @click="index=2"></li>

上述代码表示通过点击每个li，改变index的值，再通过判断index的值动态绑定一个class名为cur的样式，该样式写在style内

4. 通过:style控制样式

 <li v-for="(v,i) in people 
 	:key="i"
 	:style="v.age<=18? styleColor : ''"></li>

上述代码表示如果v.age<=18,为该li绑定一个styleColor样式，该样式写在vue实例内的data里

5. v-if 控制组件的显示和隐藏，v-if=true，节点显示，v-if=false，节点隐藏。区别于v-show，v-show是通过控制标签的display属性来控制标签的显示和隐藏，v-if是通过控制标签是否存在来控制显示和隐藏。

6.computed 计算属性

<div id="app">
       <input type="text" v-model="msg">
       <p>当前按钮上显示的文字应该是：{{toogle? '隐藏' : '显示'}}</p>
       <p style="color: red">当前按钮上显示的文字应该是：{{txtBtn}}</p>
       <p style="color: yellowgreen">当前按钮上显示的文字应该是：{{txtBtnMethods()}}</p>
       <button @click="btn">toogle</button>
   </div>

   <!-- computed  计算属性  它只依赖于它所依赖的属性进行计算，只有依赖的内容改变之后才会重新计算 -->
   <!-- 方法调用在使用时需要加括号，方法调用在页面每重新渲染的时候都会触发 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               toogle: true,
               msg: ''
           },
           methods: {
               btn() {
                   this.toogle = !this.toogle
               },
               txtBtnMethods() {
                   console.log(1)
                   return this.toogle ? '隐藏' : '显示'
               }
           },
           computed: {
               txtBtn() {
                   console.log(2)
                   return this.toogle ? '隐藏' : '显示'
               }
           }
       })
   </script>

当点击按钮的时候，计算属性和方法调用会同时触发，当输入框的内容发生改变的时候，只会触发方法调用，因为计算属性所依赖的toogle没发生改变。