Vue.js学习笔记（2）

Vue.js 条件与循环

条件判断

v-if

条件判断使用 v-if 指令：

<divid="app">

    <pv-if="seen">是否可见</p>

</div>

   

<script>

newVue({

  el:'#app',

  data:{

    seen:true

  }

})

</script>

这里， v-if 指令将根据表达式 seen 的值(true 或false )来决定是否插入 p 元素。

 

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

还是用之前用过的文本输入字数提示的例子

<divid="app">

    <divclass="textbox">

        <textareamaxlength="80" @input="countfun"v-model="text"></textarea>

    </div >

    <divv-if="text.length<=60">

    <p>您还可以输入{{word}}个字</p>

    </div>

    <divv-else="text.length>60"style="color:red">

    <p>您已经超出了{{0-word}}个字</p>

    </div>

        </div>

同许多语言一样，条件分支语法还有v-else-if，可以在一个条件分支中多次使用。需要注意的是，使用的顺序应该为v-if，v-else-if，……，v-else。

 

循环语句

循环使用 v-for 指令

针对数组的循环

<divid="app">

    <ol>

      <liv-for="item in array">

        {{ item.name }}

      </li>

    </ol>

  </div>

  

  <script>

  newVue({

    el:'#app',

    data:{

      array: [

        { name:'Baidu'},

        { name:'Google'},

        { name:'Yahoo'}

      ]

    }

  })

  </script>

然后我们也可以把数组每个元素的索引值index也给表达出来

<divid="app">

    <ul>

      <liv-for="（ item in array">

        {{ item.name }}

      </li>

    </ul>

  </div>

  

  <script>

  newVue({

    el:'#app',

    data:{

      array: [

        { name:'Baidu'},

        { name:'Google'},

        { name:'Yahoo'}

      ]

    }

  })

  </script>

我们还可以进一步把他的键名也给表示出来

<divid="app">

    <ul>

      <liv-for="(value, key,index) in object">

       {{ index }}. {{ key }} : {{ value }}

      </li>

    </ul>

  </div>

 

  <script>

  newVue({

    el:'#app',

    data:{

      object:{

        name:'v-for实例',

        url:'http://www.gaohk.com',

        slogan:'这是一个v-for的实例'

      }

    }

  })

  </script>

v-for还可以用来迭代整数

<divid="app">

    <ul>

      <liv-for="n in 10">

       {{ n }}

      </li>

    </ul>

  </div>

 

Vue.js 计算属性

计算属性关键词: computed

利用刚才前面的知识，我们可以用computed属性来对数组进行排序并输出

<divid="app">

    <ul>

        <liv-for="item insortItems">

            {{ item }}

        </li>

    </ul>

</div>

<script>

    newVue({

        el:'#app',

        data:{

            items: [1,34,89,92,45,76,3,12]

        },

        computed:{

            sortItems:function(){

                returnthis.items.sort()

            }

        }

    })

</script>

 

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

v-on可以绑定一个方法，当检测到事件时，调用该方法（下面例子也可以改写成调用一个方法）

<divid="app">

    <buttonv-on:click="counter += 1">Button</button>

    <p>这个按钮被点击了 {{ counter }} 次。</p>

  </div>

  

  <script>

  newVue({

    el:'#app',

    data:{

      counter:0

    }

  })

  </script>