vue2.0基础(一、内部指令)

指令

1、条件判断

v-if v-else v-show

### v-if 和v-show的区别:

  • v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
  • v-show:调整css dispaly属性,可以使客户端操作更加流畅。

2、循环

v-for
数字排序

  • {{item}}

对象形式的排序

 
  • {{index}}--{{student.name}}--{{student.age}}

3、v-text v-html

我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。

双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
4、v-on:绑定事件监听器

v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。

键盘回车事件v-on:keyup.enter

5、v-model 双向数据绑定
常用于表单

修饰符

  • .lazy:取代 imput 监听 change 事件。
  • .number:输入字符串转为数字。 先输入数字才有效
  • .trim:输入去掉首尾空格。
1、绑定文本框

2、绑定文本域