Vue指令总结

最新推荐文章于 2022-11-30 15:40:57 发布

原创最新推荐文章于 2022-11-30 15:40:57 发布 · 543 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue2.0指令

Vue2.0 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了Vue.js中的核心指令，包括条件渲染指令v-if/v-else/v-show，循环指令v-for，文本插值v-text/v-html，事件绑定v-on，双向数据绑定v-model及属性绑定v-bind等。同时还探讨了这些指令的具体应用场景和注意事项。

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是关键