Vue基础学习

一、Vue指令:

  • v-on指令:主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。简写为:@
    例子:分别点击“隐藏/显示”按钮可以切换内容的显示

{{name}}

效果如下:


Vue基础学习_第1张图片
显示

隐藏
  • v-model:这个指令用于在表单上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

效果如下:


  • v-if:实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素
        

Jay

Chou

当num=1时,显示Jay,当num=2时,显示Chou

  • v-show:也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性

当点击时显示此行

当点击按钮时,显示p标签

你可能感兴趣的:(Vue基础学习)