![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue学习笔记
lianchen728
这个作者很懒,什么都没留下…
展开
-
Vue循环遍历
v-for遍历数组<div id="app"> <!-- 在遍历过程中没有使用下标值 --> <ul> <li v-for="item in names">{{item}}</li> </ul> <!-- 在遍历过程中,获取索引值 --> <ul> <li v-for="(item,index) in names">{{index+1}原创 2021-01-11 16:02:30 · 1108 阅读 · 1 评论 -
Vue条件判断
v-ifv-if后面的条件为false时,对应元素及子元素不会渲染,也就是说不会有对应的标签出现在DOM中。<div id="app"> <h2 v-if="isShow">{{message}}</h2> </div> <script src="../../js/vue.js"></script> <script> const app = new Vue({ el: '#app'原创 2021-01-09 16:58:52 · 273 阅读 · 0 评论 -
v-on语法
v-on参数在前端开发过程中,我们呢经常和用户交互,比如点击,键盘等事件,在Vue中监听事件用v-on指令。 <div id="app"> <h2>{{counter}}</h2> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> <!-- 语法糖写法 -->原创 2021-01-09 16:41:53 · 223 阅读 · 0 评论 -
计算属性
什么是计算属性在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况下我们可能通过对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。比如我们有firstName和LastName两个变量,我们需要显示完整的名称,但是如果很多个地方都需要完整的名称,我们就需要写多个{{firstName}}和{{lastName}}<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <原创 2021-01-09 10:26:46 · 138 阅读 · 0 评论 -
v-bind介绍
v-bind除了将值插入到模板内容中,我们也需要将一些属性动态绑定。比如动态绑定a元素的href属性或者动态绑定img的src属性,这个时候我们就需要v-bind方法了。v-bind基础v-bind用于绑定一个或多个属性值,通过Vue实例中的data绑定元素的src和href,代码如下:<div id="app"> <!-- 错误的做法这里不可以适应Mustache语法 --> <!-- <img src="{{imgURL}}" alt=""&g原创 2021-01-08 15:37:29 · 1230 阅读 · 0 评论 -
vue插值语法
Mustache语法(双大括号)<div id="app"> <h2>{{message}}</h2> <h2>{{message}},李银河</h2> <h2>{{firstName+lastName}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>{{firstName}} {{lastName}.原创 2021-01-08 10:03:03 · 319 阅读 · 0 评论