vue学习—常用指令(一)

1. v-if，v-else：v-if显示条件为真的时候的数据; v-else显示条件为假的的时候的数据
   < el-table-column fixed= "right" label= "操作" min-width= "200"

   v-if="userInfo.manager == 1">

     < template slot-scope= "scope">

        < el-button v-if="scope.row.isDetail == 1" type= "primary" size= "small"

   @click=" detailsPage(scope.$index, scope.row)">详情</ el-button>

   < el-button v-else type= "info" size= "small"

   @click=" handleEdit(scope.$index, scope.row)">编辑</ el-button>

   < el-button v-if="scope.row.hideType == 1"

   @click=" closePedPacket(scope.$index,scope.row.redEnvelopesId, 2)"

   type= "danger" size= "small" >关闭</ el-button>

   < el-button v-else type= "success"

   @click=" closePedPacket(scope.$index,scope.row.redEnvelopesId, 1)"

   size= "small" >开启</ el-button>

   </ template>

   </ el-table-column>
2. v-else-if：顾名思义，充当 v-if 的“else-if 块”，可以连续使用。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

   < div v-if="type === 'A'">

   A

   </ div>

   < div v-else-if="type === 'B'">

   B

   </ div>

   < div v-else-if="type === 'C'">

   C

   </ div>

   < div v-else>

   Not A/B/C

   </ div>
3. v-for ：v-for指令的使用：要循环哪个标签就写在哪个标签上;data数据是原始默认数据，在显示到页面上之前会进行computed里面的运算(item,index) in students当中，item是数组当中的每一项，index是排序的索引，如果不需要排序的数字，直接用item in students ;
   < body>

   < h1>v-for </ h1>

   < div id= "app">

   < ul>

   < li v-for= "(item,index) in devstudents">{{index+1}}. 姓名：{{item.name}}，

   年龄：{{item.age}}</ li > </ ul>

   </ div>

   < script>

   var arr = {

   a: 3,

   b: 2

   };

   var app = new Vue({

   el: "#app",

   data: {

   students: [{

   name: "媛媛",

   age: "18"

   },

   {

   name: "翠花",

   age: "30"

   },

   {

   name: "二狗子",

   age: "12"

   },

   {

   name: "小威威",

   age: "23"

   },

   {

   name: "莉莉",

   age: "24"

   }

   ]

   },

   computed: {

   devstudents: function () {

   return sortByKey( this.students, "age")

   }

   }

   })

   
   

   function sortByKey( array, key) {

   return array. sort( function ( a, b) {

   var x = a[key];

   var y = b[key];

   return ((x < y) ? - 1 : ((x > y) ? 1 : 0));

   });

   }

   </ script>

   </ body>
4. v-on： v-on:简写为@        @keyup.enter按下enter键松开后触发的事件=@keyup.13(13是enter键的键值)
   < body>

   < h1>v-on </ h1>

   < div id= "app">

   < p>{{a}}</ p>

   < p>

   < button v-on:click= "jia">+1</ button>

   < button @ click= "jian">-1</ button>

   </ p>

   < p>

   < input type= "text" @ keyup. enter= "onEnter" v-model= "b">

   </ p>

   </ div>

   < script>

   var app = new Vue({

   el: "#app",

   data: {

   a: 10,

   b: 0

   },

   methods: {

   jia: function () {

   this.a ++;

   },

   jian: function () {

   this.a --;

   },

   onEnter: function () {

   this.a = this.a + parseInt( this.b);

   }

   }

   })

   function sortByKey( array, key) {

   return array. sort( function ( a, b) {

   var x = a[key];

   var y = b[key];

   return ((x < y) ? - 1 : ((x > y) ? 1 : 0));

   });

   }

   </ script>

   </ body>
5. v-text/v-html：(1) v-text是用于操作纯文本当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。其中v-text可以简写为{{}},并且支持逻辑运算。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。比如<textarea cols="30" rows="10">{{message}}</textarea>刚开始的时候文本域里的值跟message是一样的，但是这个时候改变文本域里面的内容，原始message不会发生相应的改变。(2)v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
   < body>

   < h1>v-text/v-html </ h1>

   < div id= "app">

   < span>{{message}}</ span>=

   < span v-text= "message"></ span>

   < p>

   < input type= "text" v-model= "message">

   </ p>

   < p v-html= "messageHtml"></ p>

   </ div>

   < script>

   var arr = {

   a: 3,

   b: 2

   };

   var app = new Vue({

   el: "#app",

   data: {

   message: "Hello Vue!",

   messageHtml: "<h1>Hello My Girl!"

   }

   })

   function sortByKey( array, key) {

   return array. sort( function ( a, b) {

   var x = a[key];

   var y = b[key];

   return ((x < y) ? - 1 : ((x > y) ? 1 : 0));

   });

   }

   </ script>

   </ body>