当前位置：首页 > Web前端 > vue.js

04-VUE中的常用命令操作

时间：2023-04-01 00:36:27 vue.js

背??景分析传统的html不支持表达式、分支语句、循环语句等结构的定义。为了弥补很多前端框架的不足，模板引擎给html元素添加自定义属性，然后底层通过解析引擎Handlehtml自定义属性，通过这种方式来增强html的功能。Vue中常用的命令v-bind在HTML中。如果希望元素的属性值随着程序内容的出现而变化，可以使用v-bind或者:代替。基本语法如下：也可以使用其简化形式，其基本语法如下：案例分析：hello

v-showv-show是一个特殊的控件，用于显示和隐藏元素的特殊指令。基本语法为：Vue对象扫描到v-show时，会立即执行""变量或js表达式中的变量或js表达式，如果变量或js表达式的值为true，什么都不做，元素保持原样显示。如果变量或js表达式的值为false，newVue()会自动将display:none添加到当前元素。示例关键代码如下：显示×

v-if和v-elsev-if和v-else是在html中实现分支控制，选择两者之一的实现，使用时，v-if和v对应的两个元素-else必须并排写！中间不能插入其他元素，其基本语法为：

示例关键代码如下：

欢迎，叮叮|注销

登录|registerv-else-ifv-else-ifis专门和v-if配合使用，控制多个元素，选择一个显示的特殊指令的基本语法为：

......注意v-if和v-else-if和v-else必须连续写，并且不能插入其他元素。示例关键代码如下：

=90">Excellent=80">Good=70">通过通过v-forv-for是一种特殊的方法，根据重复生成多个相同结构的元素数组指令的内容。其语法为：<待重复生成的元素v-for="(当前元素值，当前位置)数组">示例关键代码如下：

{{i+1}}-{{t}}

v-for也可以遍历对象属性，例如：

{{key}}:{{value}}

v-for也可以计数，例如：

{{i}}

<脚本>newVue({el:"#app",data:{pageCount:5//共5页}})v-onv-on是专门绑定事件处理器的命令，其基本语法为：v-on也可以用@符号代替，其基本语法结构为：页面中定义的任何事件处理函数都必须添加到methods中memberinnewVue()函数实体示例关键代码如下：d1d2v-html如果{{}}绑定到一个HTML片段，它不会send由浏览器解析。相反，HTML片段的内容按原样显示-与DOM中的textContent相同。如果要解析html，可以使用v-html代替{{}}。它的基本语法结构是：这个位置显示变量内容示例关键代码如下：

{{msg}}

v-textv-text是一条特殊指令，可以代替{{}}绑定元素内容，用于设置元素内部的文字内容，可以防止{{}}因为网络延迟暂时显示。其语法为：示例关键代码如下：

v-modelv-model用于实现双向绑定指令，不仅可以自动将程序中的变化更新到页面（model->view），还可以将页面中的变化更新回程序中的变量（view->model）。基本语法为：示例关键代码如下：

更新选择操作的双向绑定：单次选择操作的值是一个硬编码的固定替代值！当用户切换不同radio之前的selected状态时，真正改变的是radio的checked属性的值。因此，如果要使用双向绑定获取当前选中radio的值，应该绑定checked属性：示例代码如下：Gender:

Male

Female

你选择的性别是：{{sex==1？"Male":"Female"}}

select的双向绑定element一个select包含多个option元素。所有替代值都分布在每个选项上。但是每个替代值也是硬编码的。每次用户选择不同的选项时，select元素实际上将所选选项的值修改为select的value属性。其语法为：xxx............示例代码为如下：

北京上海杭州
总结（Summary）本节主要分析vue中常用的一些命令元素。在理解和应用过程中，可以参考本文档和官方文档，结合实践熟练应用。

上一篇：Vue的Mixins

下一篇：关于vue项目watch函数的this指向问题

04-VUE中的常用命令操作相关文章

最新推荐

猜你喜欢