0

0

vue常用指令有哪些

青灯夜游

青灯夜游

发布时间:2020-11-25 11:32:20

|

37557人浏览过

|

来源于php中文网

原创

vue常用指令有:v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

vue常用指令有哪些

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

指令的作用是当表达式的值改变时,相应地将某些行为应用到 DOM 上。

vue常用指令总结

立即学习前端免费学习笔记(深入)”;

1.v-once

能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

原始值: {{msg}}

后面的: {{msg}}

4.v-else

必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错

  

小明的身高是: {{height}}m

  

小明的身高不足1.70m

5.v-else-if  

这个比较简单 直接看代码就可以了 哈哈哈  输入成绩多少 就显示相应的等级 

输入的成绩对应的等级是:

优秀

良好

及格

不及格

6.v-for

基于数据渲染一个列表,类似于JS中的遍历。其数据类型可以是 Array | Object | number | string

JTBC网站内容管理系统5.0.3.1
JTBC网站内容管理系统5.0.3.1

JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架,开源协议为AGPLv3,没有任何附加条款。系统可以通过命令行一键安装,源码方面不基于任何第三方框架,不使用任何脚手架,仅依赖一些常见的第三方类库如图表组件等,您只需要了解最基本的前端知识就能很敏捷的进行二次开发,同时我们对于常见的前端功能做了Web Component方式的封装,即便是您仅了解HTML/CSS也

下载

该指令之值,必须使用特定的语法(item, index) in items,  index是索引,可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字) 。v-for的优先级别高于v-if之类的其他指令


        

{{index +':'+d}}

{{index+':'+dd}}
{{dd2}}

{{gg}}

{{gg2}}

  

7.v-html

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html  而且给一个标签加了v-html 里面包含的标签都会被覆盖。

注意v-html要慎用 因为会出现安全问题  官网解释为:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

  

哈哈哈

 

8.v-text

给一个便签加了v-text 会覆盖标签内部原先的内容  如下面的例子  哈哈哈不会显示

哈哈哈

9.v-bind

用法  

 
... 
 ...

改变src alt等属性 @@##@@ @@##@@

还可以绑定类名和css样式等

//v-for是一个遍历 给他一个calss 如果index===cative class名是active,如果不等就为空 //index 是v-for的索引

{{college}}

今天的天气很好!

注意input里面 用了v-blnd 写法不在是{{}}包着了;


        

              //加粗的内容刚刚学时 很容易出错 注意不要加{{}}; 原始值:value=name /> 模板:value=name.split('').reverse().join() /> methods:value=fz() /> conputed:value=fz2 />

10.v-on  

绑定事件的  还有些用法在后面的博客中会提到 


 ... 
 
 
...

11.v-model

v-model是一个指令,限制在、components中使用   用于数据的双向绑定操作.

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程入门!!

vue常用指令有哪些vue常用指令有哪些

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号