0

0

一些简单的Vue.js的指令总结

零到壹度

零到壹度

发布时间:2018-04-21 11:16:49

|

1447人浏览过

|

来源于php中文网

原创

这篇文章介绍的内容是一些简单的Vue.js的指令总结,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

html页面:

{{message}}

页面中的数据就是data中的数据

模版指令:控制模块的内容

v-text (控制元素的文本内容)  

eg: 

--> a 是data中的a

v-html(控制元素的内容,包括内部结构 )

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

eg:

控制模块隐藏    
v-if

 eg:

-->isShow的值是布尔值,true:显示, false,隐藏

v-show

eg:

-->isShow的值是布尔值,true:显示, false,隐藏

渲染循环列表  v-for  

eg: 
         
  •          

           -->item是items里的每一个对象,items是data里的数组      

事件绑定v-on      

EDEN-MACE分销管理系统
EDEN-MACE分销管理系统

EDEN-MACE分销管理系统是微服务下的分销管理利器,更加灵活的管理佣金,涵盖并且总结了目前流行的分销模式,让分销更加简单,后期开发立足于产业互联网,致力于打通产业内部之间的联系。 产品亮点1、权限和分销完全分离,符合开发的低耦合的需求。2、产品完全可配置化,仅需要少量改动3、采用微服务思想,和原业务低耦合 ,不需要的时候可以随时下线。4、可视化图形化界面统计。5、完善化的账务体系,可追溯每一笔

下载
eg:  click 可以是hover,focus等事件

eg:   简写形式

属性绑定

v-bind   eg:@@##@@    src属性赋值 imgSrc

(简写)eg:  

isRed:true:加上类red,false:不加类red eg:

绑定多个类名 eg:

实例:

js:var app = new Vue({

  el:"#app",

  data:{ 这里填写数据,以键值对的形式

     a:"heollo",

     demo:1,         items:[{label:"vue1"},{label:"vue2"}]

     },

  methods:{这里可以写自己定义的函数,

    doSomething:function(){

       console.log(this.a);   --> this指代的是vue的对象, a 是data里的a       }

   },

  watch:{ 监听,监听demo的变化, 参数是变化前后的值变化

    'demo':function(val, oldVal){      console.log(val,  oldVal);  

    }

    }

  });

相关推荐:

Vue.js自定义指令的用法与实例

Vue.js入门-内置指令v-html 

Vue.js知识总结——指令

vue.js使用注意事项

一些简单的Vue.js的指令总结

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

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

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

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

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

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

11

2026.01.21

热门下载

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

精品课程

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

共58课时 | 4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

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

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