vue指令

前言

对vue常见指令进行总结

指令	作用
v-bind	为HTML标签绑定属性值，如设置href，css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

大家可以猜测一下，下面那几行是可以跳转的，这就可以大概理解v-bind有什么作用了。

v-bind可省略

v-model

修改文本框里面的内容就是修改程序中对应变量的值，即会影响页面中显示的值。

百度

v-on

点击两个按钮都可以调用函数，在methods里面写函数，methods和data()同级。

v-on:click可以简写为@click

v-if v-else-if v-else

“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-show

无论初始条件如何，始终会被渲染，只有CSS display属性会被切换。

v-for

列表渲染

案例

根据下面的数据来输出表格

users: [
        {
          name: "Tom",
          age: 20,
          gender: 1,
          score: 78,
        },
        {
          name: "Rose",
          age: 18,
          gender: 2,
          score: 86,
        },
        {
          name: "Jerry",
          age: 26,
          gender: 1,
          score: 90,
        },
        {
          name: "Tony",
          age: 30,
          gender: 1,
          score: 52,
        }
      ]

后面的标点符号我不知道是不是必须的，就是通过快捷键格式化之后就自己补上的 

改：把男女放在一个格子里面加上if判断，就算出错了也是在一个格子里面显示男女，如果按照之前的写法就会导致文字写到其他列去，由于需要居中显示，只需要给tr标签加上align=“center”属性即可，不需要每个td都有align=“center”属性。