Vue学习笔记之v-for、v-bind、v-on、v-if的语法

定义变量:let—>定义变量 而 const—>定义常理

vue.js 编程范式:声明式编程

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第1张图片

 

语法:

v-for = "item in moves" 循环“moves”数组里面的值,然后赋值给item

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第2张图片

 

v-bind :动态绑定

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第3张图片

 

计算函数中 for 的三种写法

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第4张图片

计算与函数的区分:for循环的时候,性能就区分开来了

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第5张图片

 

v-on

如果该方法不需要额外的参数,那么该方法的()可以不添加此括号。但是注意,如果该方法本身只有一个参数,那么会默认将原生的事件event参数传进去。

如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第6张图片

v-on的参数问题:

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第7张图片

v-on的修饰词

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第8张图片

条件判断:v-if v-else-if v-else

其中label的作用是点击相应的文字也可以进行选择

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第9张图片

作业回顾:点击相应的名字,则颜色变红

Vue学习笔记之v-for、v-bind、v-on、v-if的语法_第10张图片

 

 

你可能感兴趣的:(Vue)