![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 493 阅读 · 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 · 524 阅读 · 0 评论 -
vue----事件监听 v-on的使用
v-on事件监听语法糖@使用@代替v-onv-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 · 273 阅读 · 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 · 64 阅读 · 1 评论 -
vue------计算属性
计算属性的基本使用使用mustache语法,进行简单的运算使用方法使用计算属性以上三种都可以实现同样的效果下面是代码实现过程:<div id="app"> <h2>{{firstName + lastName}}</h2> <h2>{{firstName}}{{lastName}}</h2> <!--使用方法--> <h2>{{getFullName()}}</h2> <原创 2020-11-12 22:56:30 · 64 阅读 · 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 · 127 阅读 · 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 · 200 阅读 · 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 · 69 阅读 · 0 评论