vue各指令

来源：互联网发布：htc vive unity3d 编辑：程序博客网时间：2024/06/15 11:26

vue指令

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

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

以下代码为例：

 <div id="app"><div v-if="myShow">           -今天天气真好，适合于逛街       </div></div>

script部分：

        <script>              var app = new Vue({                el : "#app",                "data" : {                    "myShow" : false                }            });        </script>

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

<div  id="con"><span v-if="grade == 1">            这是1111111        </span><span v-if="grade > 1">           这是222222        </span></div>

scipt的代码部分：

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

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

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

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

<span v-if="grade == 1">            恭喜您，幼儿园毕业了        </span>        <span v-else-if="grade == 2">            -恭喜您,长大了，已经二年级了        </span>        <span v-else-if="grade == 3">            <!--恭喜您,长大了，已经三年级-->        </span>        <span v-else>            恭喜您,长大了，可以成家了        </span>

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

  <div v-for="(b,index) in books">                {{b.id}}----{{b.name}}----{{b.price}}---{{index}}<br>            </div>

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

  <script>            var app = new Vue({                el : "#app",                "data" : {                    grade : 2,                    books : [                        {                            id : 1,                            name : "JavaScript从入门的放弃",                            price : 52.5                        },                        {                            id : 2,                            name : "Java从入门的吐血",                            price : 45                        },                        {                            id : 3,                            name : "PHP是世界上最好语言",                            price : 40                        },                        {                            id : 4,                            name : "mysql从入门到删库",                            price : 63z                        }                    ]                }            });        </script>

v-on:click指令绑定事件

以下代码为例：

   <div id="app">        <button v-on:click="test">点击一下呗</button>        <button v-on:click="test()">点击一下呗</button>        <button v-on:click="alerts('我瞅你咋地！')">点击一下呗</button>    </div>

script代码部分;

 <script>            var app = new Vue({                el : "#app",                "methods" : {                    test : function () {                        alert("你点我干啥");                    },                    "alerts" : function (msg) {                        alert("你瞅我干嘛？");                        alert(msg);                        console.log(e);                    }                }            });        </script>

过滤

大写:以下代码为例

 <div id="app">        {{msg | uppercase}}<br>   </div>

script代码部分

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

阅读全文

0 0