Column goal
Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and information point introductions for flexible use.
(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else ,v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixin, render, internationalization, Vue Router, etc.
(2) -cascader, el-input-number, el-switch, el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header, el-tabs, el-dropdown, el-steps, el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等
Contents of this article
Demand background
In Vue projects, we often use ternary operations to simplify if-else operations, which will reduce the amount of code and make it easier to read. In the following introduction, we will introduce single-condition and multi-condition scenarios, as well as style, type, class, event, and ternary operation examples in text content.
Single condition and multiple conditions
1. Condition? Expression 1: Expression 2
If the condition is true, expression 1 is executed; if it is false, expression 2 is executed.
Example: a=1? b:c
2. Multi-condition operations
condition1 ? expression1 : condition2 ? expression2 : condition3 ? expression3 : expression4
When condition 1 is true, execute expression 1, return false, execute condition 2, condition 2 returns false, execute condition 3, if condition 3 returns true, execute expression 3, otherwise execute expression 4, and so on.
Example: a=1?b:c=2?d:e=4?f:g
Various scenarios
event
Example: <el-button type="primary" @click="edit == 'mod' ? modify() : submit()">Submit
style
示例：:style=“{left: 10 + ‘px’,color:weixin ==‘gis-dajianshi’ ? ‘red’ : ‘’}”
class
示例1：<div:class=“[‘classify’,current==‘0’ ? ‘active’ : ‘’]” @click=‘current=0’>xx</ div>
示例2：<div :class=“‘classify’+(current==‘0’?’ active’:‘’)” @click=‘current=0’>xx</ div>
type
Example: <el-button :type="on[1]?'primary':'default'" @click="dajianshi()"> Great Sword Master
text content
Example:
{ {edit ? 'Great Sword Master' : 'Land}}