vue的常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性，由vue提供的。每一个指令在vue中都有固定的作用。

在vue中提供了很多指令，常用的有：{{变量名}},v-if、v-model、v-for、v-html、@事件名或:属性名=等等。

指令会在vm对象的data选项数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：

vue1.xvue2.x以后描述

v-html

v-html

输出html内容到双标签中

v-text="普通文本"

{{普通文本}}

输出纯文本内容到双标签中

v-bind:属性名

:属性名

把属性中的内容当成vue变量进行输出

v-on:事件名

@事件名

绑定事件操作

属性操作

格式：

<标签名 :标签属性="data变量名">

三种方式

{{ str1 }}

淘宝 变量写法

百度

显示/隐藏密码

代码：

事件绑定

基本写法

<标签名 @click="num+=5">按钮

<标签名 @click="方法名">按钮

<标签名 @click="方法名(参数1,参数2,....)">按钮

vue中常用事件的写法对照：

vue写法原生javascript写法描述

@click

onclick

鼠标点击事件

@dblclick

ondblclick

鼠标双击事件

@submit

onsubmit

表单提交事件

@focus

onfocus

获取焦点事件

@blur

onblur

失去焦点事件

@change

onchange

值发生改变事件

....

...

...

商品增加减少数量

步骤：

给vue对象添加操作数据的方法

在标签中使用指令调用操作数据的方法

基于事件操作，完成表单的数据校验

操作样式

操作样式，本质就是属性操作，使用冒号

2.3.1 控制标签class类名

格式：

元素

总结：

1. 给元素绑定class类名，最常用的就是第1,2,3种。

vue对象的data数据：

data(){

return {

cls1: "p1",

b1: true,

b2: true,

p_cls1: {

p1: true,

p2: false

},

cls2: {

p2: true,

},

}

},

html元素：

最终浏览器效果：

控制标签style样式

工作中基本很少出现style控制样式，一个规范不允许，另一个就是代码不好维护

基本样式：

特效实现，代码：

代码运行效果：

条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

v-if

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

v-if后面可以出现0个或多个v-else-if语句，而v-else-if后面可以跟着0个或1个v-else子语句。

v-show

v-show用法和v-if大致一样，区别在于2点：

v-show后面不能v-else或者v-else-if

v-show隐藏元素时，使用的是css样式的display:none来隐藏的，

而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

当HTML页面中有使用了vue以外的其他前端插件，这些插件也操作了和vue控制的内容范围重叠的内容，则需要使用v-show。

列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

book in book_list

(book,key) in book_list

练习：

goods_list: [

{"name":"python入门","price":150},

{"name":"python进阶","price":100},

{"name":"python高级","price":75},

{"name":"python研究","price":60},

{"name":"python放弃","price":110},

]

# 把上面的数据采用table表格输出到页面，价格大于100的一行数据需要添加背景色橙色[orange]

第一种方案

第二方案

翻译

搜索

复制