vue小白教程-3 本地应用指令上 （ v-text、v-html、v-on、v-show、v-if）

vue指令可以分为：     ●内容绑定，事件绑定

                                    ●显示切换，属性绑定

                                    ●列表循环，表单元素绑定

 

1.v-text

它设置标签的文本值。效果等同关于{{}}} 另''也可以直接包含文本内容。写法如下：

<h6 v-text="message"></h6>

2.v-html

它设置标签的innerHTML。如果设置普通文本则同v-text，如果设置html结构会是标签，html例子如下：

输出结果：

点击箭头处会连接到代码中网址

3.v-on

它为元素绑定事件，传递自定义参数，事件修饰符

绑定点击、双击等事件

指令在@中 绑定方法定义在methods中 方法内部可以用this访问data中数据。

点击图中按钮后效果如下：

传递自定义参数，事件修饰符

@keyup.enter="随意点" 按entre键才出发显示随意点

其余修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on

事件的绑定是函数调用形式，即可传入自定义参数。用形参引入实参。

 

4.v-show

根据表达值的真假，切换元素的显示与隐藏，指令后面内容最终都会解析为布尔值 true显示 false隐藏。

 

5.v-if

和v-show几乎同用法，

点击按钮切换显示状态的代码如下:

v-show与v-if比较：

v-show操纵样式而v-if操纵dom数，

因dom数对性能影响很大，所以频繁切换用v-show不频繁时用v-if