vue各指令

vue指令

说指令之前当然要先引入文件了，强烈推荐敲代码的时候，为了方便，尽量使用vue.js。当提交的时候用压缩的vue.min.js。

v-show指令就相当于anghualarJs中的ng-hide/ng-show

以下代码为例：

 


           -今天天气真好，适合于逛街
       

script部分：

v-if指令就相当于anglarJS中的ng-if——单分支

            这是1111111
        

           这是222222
        

scipt的代码部分：

 var app = new Vue({
                el : "#app",
                  grade:1,
                       })

当grade为1是显示的是“这是111111111111”，

当grade为2或者大于2显示“这是222222”

v-if指令就相当于anglarJS中的ng-if——多分支

            恭喜您，幼儿园毕业了
        
        
            -恭喜您,长大了，已经二年级了
        
        
            
        
        
            恭喜您,长大了，可以成家了
        

v-for指令就相当于anglarJS中的循环
以代码为例：

  

                {{b.id}}----{{b.name}}----{{b.price}}---{{index}}

            

                    在VUE1.x版本，$index 存在
                    但是在2.x版本中，尤大取消了
script代码部分：

v-on:click指令绑定事件

以下代码为例：

   

        点击一下呗
        点击一下呗
        点击一下呗
    

script代码部分;

过滤

大写:以下代码为例

 


        {{msg | uppercase}}

   

script代码部分

 var app = new Vue({
                el : "#app",
                data : {
                    msg : "liujianhong",
                },
                "filters" : {
                    uppercase : function (data) {
                        if (!data) {
                            return "";
                        }
                        return data.toUpperCase();
                    },
            }