vue
关注
分享
扫一扫
vue学习
要买苹果吗？
这个作者很懒，什么都没留下…
展开
-
vue----v-for遍历数组和遍历对象
v-for遍历数组 <div id="app"> <!--1.在遍历过程中，没有使用下标值--> <ul> <li v-for="name in names">{{name}}</li> </ul> <!--2.在遍历过程中，获取索引值--> <ul> <li v-for="(name, index) in names">{{index+1}}.{{name}}&原创 2020-11-17 21:55:00 · 536 阅读 · 1 评论 -
vue----条件判断 v-if的使用
v-if使用 v-if=“布尔表达式”，当布尔表达式为true执行后面的内容，为false将不执行 <div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> &原创 2020-11-17 21:52:22 · 649 阅读 · 0 评论 -
vue----事件监听 v-on的使用
v-on事件监听 语法糖@ 使用@代替v-on v-on的基本使用 <div id="app"> <h2>{{counter}}</h2> <!--<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <!-- <button v-o原创 2020-11-17 21:36:15 · 333 阅读 · 0 评论 -
ES6补充
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //ES5中的var是没有块级作用域的 //ES6中的let有块级作用域 //1.变量作用域：变量在什么范围内是可原创 2020-11-13 20:43:22 · 84 阅读 · 1 评论 -
vue------计算属性
计算属性的基本使用 使用mustache语法，进行简单的运算 使用方法 使用计算属性 以上三种都可以实现同样的效果 下面是代码实现过程： <div id="app"> <h2>{{firstName + lastName}}</h2> <h2>{{firstName}}{{lastName}}</h2> <!--使用方法--> <h2>{{getFullName()}}</h2> <原创 2020-11-12 22:56:30 · 90 阅读 · 1 评论 -
v-bind使用
1.动态为属性赋值 <div id="app"> <!--错误的做法，这里不能使用mustache语法--> <!--<img src="{{imgURL}}">--> <!--使用v-bind指令--> <img v-bind:src="imgURL"> <a v-bind:href="aHref">百度一下</a> <!--语法糖的写法--> <img :sr原创 2020-11-12 20:52:34 · 151 阅读 · 1 评论 -
vue-----v-for和v-bind结合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <ul>原创 2020-11-12 20:48:33 · 249 阅读 · 1 评论 -
vue初学
Vue (读音 /vjuː/，类似于 view) const 常量 let变量 {{message}}：mustache语法,不仅可以直接写变量，还可以写简单的表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"原创 2020-11-12 10:20:57 · 88 阅读 · 0 评论