自学Vue.js第三天

v-bind(指令–13个)

什么是指令:为HTML提供新动能的特殊属性

为什么:{{}}只能绑定元素的内容(innerHTML),不能绑定属性、事件或执行程序结构

何时:不能使用{{}}绑定的位置,又想动态生成值,都要用各种指令来增强

如何:

​ 1.v-bind:专门用于动态绑定属性值

​ 何时:只要一个属性的值需要动态生产时

​ 如何:完整:<ANY v-Bind:属性=“表达式”

​ 可省略v-bind

​ 2.v-for:专门根据一个数组中的元素,动态反复生成多段相同的页面内容

​ 何时:只要根据一个数组中元素,动态绑定页面内容时

​ 如何:<ANY v-for="模型变量of数组类型模型变量

​ 根据of后数组中的元素个数,反复生成多个元素

​ of前的模型变量是临时的,获得数组中的一个当前元素

​ of前的模型变量在内部可用于绑定!

​ 3.控制元素的显示隐藏:

​ v-if:专门根据一个天剑表达式来表达当前元素是否显示

​ 只有条件表达式为true时,当前元素才显示

​ 何时:只要根据一个条件控制元素的显示隐藏时

​ 如何使用:<ANY v-if=“条件表达式1”

​ <ANY v-else-if=“条件表达式2”

​ <ANY v-else=“条件表达式3”

4.v-show:

​ 专门根据一个条件表达式来觉得当前元素是否显示

​ 只要条件表达式为true时,当前元素显示

​ 采用display:block/none的方式显示隐藏

​ 何时:如果仅控制一个元素的显示和隐藏时,首先

​ v-if:采用添加删除元素的方法,控制显示隐藏

5.绑定事件:

​ 界面View中:

​ <ANY v-on: 事件名=“处理函数()"

​ 简写:@

​ new Vue({})中:

​ new Vue({

​ el:"选择器“

​ data:{ 模型变量 },

​ methods:{//专门保存控制器所需要所有自定义方法的属性

​ 处理函数(){//处理函数:function(){

​ //this->当前Vue对象->vm

​ this.模型变量 //访问模型变量

​ }

​ }

​ })

猜你喜欢

转载自blog.csdn.net/qq_43664684/article/details/106319413