vue学习—常用指令(二)

1. v-model：-model通常用于表单组件的绑定，例如input，select等。它实现的是表单组件的双向绑定，如果用于表单控件以外标签是没有用的。如代码所示，v-model有三个修饰符:   (1) v-model.lazy在改变这个input输入框里message的值的时候，原始的message值不会发生改变，只有当v-model.lazy这个输入框失去焦点的时候原始的message值才发生相应的改变。在做搜索功能的时候常用到v-model.lazy;   (2) v-model.number，当数据是数字的时候不需要转换就可以直接拿来运算，不需要 onEnter: function () {this.a = this.a + parseInt(this.b); }这种操作;   (3) v-model.trim去掉该条数据前后的空格，也就是说在这个输入框里面的值的前后空格是不生效的。 < body> < h1>v-model </ h1> < div id= "app"> < p>原始文本：{{message}}</ p> < h3>文本框{{a}}</ h3> < p>v-model: < input type= "text" v-model= "message"> </ p> < p>v-model.lazy: < input type= "text" v-model. lazy= "message"> </ p> < p>v-model.number < input type= "text" @ keyup. enter= "onEnter" v-model. number= "b"> </ p> < p>v-model.trim < input type= "text" v-model. trim= "message"> </ p> < hr> < h3>文本域</ h3> < textarea v-model= "message" cols= "30" rows= "10"></ textarea> < hr> < h3>单选框</ h3> < p>{{xz}} < input type= "checkbox" v-model= "xz"> </ p> < hr> < h3>多个单选框绑定一个数组</ h3> < p> < input type= "checkbox" id= "xz1" value= "xz1" v-model= "xzArray"> < label for= "xz1">xz1</ label> < br> < input type= "checkbox" id= "xz2" value= "xz2" v-model= "xzArray"> < label for= "xz2">xz2</ label> < br> < input type= "checkbox" id= "xz3" value= "xz3" v-model= "xzArray"> < label for= "xz3">xz3</ label> < p>{{xzArray}}</ p> </ p> < hr> < h3>单选按钮</ h3> < input type= "radio" id= "one" value= "true" v-model= "danxuan"> < label for= "one">true</ label> < br> < input type= "radio" id= "two" value= "false" v-model= "danxuan"> < label for= "two">false</ label> < p>{{danxuan}}</ p> < hr> < h3>选择列表</ h3> < p> < select v-model= "set"> < option>A</ option> < option>B</ option> < option>C</ option> </ select> < p>{{set}}</ p> < select v-model= "rerge" multiple> < option>A</ option> < option>B</ option> < option>C</ option> </ select> < p>{{rerge}}</ p> </ p> </ div> < script> var app = new Vue({ el: "#app", data: { a: 10, b: 0, message: "Hello Vue!", xz: true, xzArray: [], danxuan: "", set: "", rerge: [] }, methods: { onEnter: function () { this.a = this.a + 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>

2. v-bind：(1) 绑定class: v-bind:class="{classA:false}"中classA是style里面的class类名，true/false控制那个类名是否起作用;在绑定class时使用数组的话，在使用v-bind:class="[classA,classB]"的同时，data里面要设置classA,classB的值:classA: "classA",classB: "classB"; 绑定class时使用数组的话，在使用v-bind:class="[classA,classB]"的同时，data里面要设置classA,classB的值:classA: "classA",classB: "classB";  (2) 绑定style时，style对象里面键的键值对中，键名是css的属性名，遇到横线链接的如font-size要去掉横线用小驼峰命名，键的值必须是data里面设置的值;style绑定json语句的时候，所用的这个json对象必须是data里面的一个设置css样式的json对象，这个对象里面遇到有横线链接的属性名也要用小驼峰命名;  (3) v-bind:可以缩写为一个冒号; < body> < h1>v-bind </ h1> < div id= "app"> < img v-bind:src= "imgSrc" width= "200" height= "200"> < hr> < h3>一.绑定class</ h3> < div v-bind:class= "{classA:true}">1.绑定class中的判断</ div> < div v-bind:class= "[classA,classB]">2.绑定class中使用数组</ div> < div v-bind:class= "[color?classA:classB]">3.绑定class中使用三元表达式判断</ div> < div v-bind:class= "[{classA:color},classB]">4.绑定class中使用判断组合</ div> < hr> < h3>二.绑定style</ h3> < div v-bind:style= "{color:blue,fontSize:font}">style绑定</ div> < div v-bind:style= "fontArry">style绑定json语句</ div> </ div> < style> .classA { color: red; }

   .classB { font-size: 58 px; } </ style> < script> var app = new Vue({ el: "#app", data: { message: "Hello Vue!", imgSrc: "../images/01.jpg", classA: "classA", classB: "classB", blue: "blue", font: "18px", color: true, fontArry: { color: "green", fontSize: "26px", fontWeight: "550" } }, computed: {

   } }) </ script> </ body>