1.0 v-if&v-else&v-show
v-if 是指令中判断如果是true则会显示该Dom元素,如果不是,则不显示该Dom元素
v-else是v-if下的另一种情况v-if如果为false则会显示v-else的内容
v-show和v-if的效果是一样的,但是唯一的区别是v-show是不显示,但是dom元素还在,而v-if不显示,则是vue不加载该dom元素,并不存在
2.0 v-for
v-for是循环某一个元素的指令,基础模版是<li v-for="(item,index) in items">{{item}}</li>
可以循环纯数组,也可以循环数据对象也就是json对象,如果给数组里面的数组排序,就必须用到computed的对象里面重新定义一个对象,返回排过序的数组,因为data里面的原数组vue实例对象会保护,如果直接用的,会污染原来的数据源,所以才会重新定义对象来操作原数组。如果数组只是一个纯数字的数组,那么直接用sort()方法,里面用一个function(a,b){return a-b}的函数来处理数组。如果是一个json对象的话就要用到
//数组对象方法排序:
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));
});
}这里的key一定要加引号,因为是键值,属性值
来返回该数组,这在工作会经常用到,所以一定得记住
3.0 v-text&v-html
v-text 效果其实和{{}}里面加vue实例对象的属性是一样的,但是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。v-html则会解析html相应的标签格式,有时候会很危险,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
4.0 v-on
v-on是绑定事件 需要在methods对象中添加事件 简写是@事件,事件后面还可以加键盘码,如图所示
5.0 v-model
v-model双向数据绑定,一般用在表单元素中,可以加修饰码.lazy.number.trim,其中值得注意的是多选绑定一个数组
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>
注意这个value是关键