Vue
------------
XuuuT
这个作者很懒,什么都没留下…
展开
-
component实现组件切换
<div id="app"> <a href="" @click.prevent="comname='login'">登录</a> <a href="" @click.prevent="comname='register'">注册</a> <component :is="comname"></co...原创 2020-01-02 17:25:43 · 358 阅读 · 0 评论 -
创建组件的几种方式
1.<div id="app"> //直接把组件的名称 以HTML 标签的形式引入到页面中 <mycom1></mycom1></div><script> // Vue.extend创建全局vue组件 var com1 = Vue.extend({ template:'<h1...原创 2020-01-02 11:23:36 · 343 阅读 · 0 评论 -
指令-让文本框获取焦点
<label> 搜索名称关键字: <input type="text" class="form-control" v-model="keywords" v-focus> </label>//定义全局的指令 //参数1:指令的名称 参数二:一个对象,对象里有一...原创 2019-12-28 10:05:25 · 267 阅读 · 0 评论 -
简易的增删查案例
<div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">增删查案例</h3> </div> <...原创 2019-12-25 11:10:45 · 125 阅读 · 0 评论 -
v-if和v-show的特点和使用
v-if:每次都会重新删除或创建元素(有较高的切换性能消耗)v-show:每次不会重新进行DOM元素的删除和创建操作,只是切换元素的display:none样式(有较高的初始渲染消耗)使用:如果元素涉及到频繁的切换,最好不要使用v-if;如果元素可能永远不会被显示出来,则推荐使用v-if...原创 2019-12-24 17:19:04 · 253 阅读 · 0 评论 -
v-for指令的几种使用方式
1.循环普通数组<div id="app"> <p v-for="(item,i) in list">索引值:{{i}}-------每一项:{{item}}</p> </div> <script> var vm = new Vue({ el:'#app', ...原创 2019-12-24 16:41:58 · 786 阅读 · 0 评论 -
通过属性绑定为元素绑定style行内式
<div id="app"> <h1 :style="{color:'red','font-size':'40px'}">123456789</h1> <h1 :style="styleobj1">123456789</h1> <h1 :style="[styleobj1,styleo...原创 2019-12-24 16:10:55 · 138 阅读 · 0 评论 -
通过属性绑定为元素设置class类样式
<div id="app"> <!--直接传递一个数组 class需要用v-bind做数据绑定--> <!-- <h1 :class="['thin','red']">123456789</h1>--> <!--在数组中使用三元表达式--> <!-- <...原创 2019-12-24 15:50:22 · 171 阅读 · 0 评论 -
使用v-model实现简易计算机
<div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-<...原创 2019-12-24 15:26:59 · 214 阅读 · 0 评论 -
事件修饰符
<style> .inner{ height: 150px; background-color: red; } .outer{ padding: 40px; background-color: green; } <...原创 2019-12-24 10:37:17 · 85 阅读 · 0 评论 -
文字跑马灯效果
<div id="app"> <input type="button" value="开始" @click="gooo"> <input type="button" value="停止" @click="stoppp"> <h4>{{ msg }}</h4> </div>...原创 2019-12-23 20:58:51 · 150 阅读 · 0 评论 -
v-bind、v-on指令
<div id="app"> <!-- v-bind是用于绑定属性的指令--> <input type="button" value="按钮" v-bind:title="mybutton"> <!--v-bind指令被简写为 :--> <!--v-bind中可以写合法的js表达式...原创 2019-12-23 20:14:54 · 200 阅读 · 0 评论 -
v-cloak、v-text、v-html
<div id="app"> <!--使用v-cloak能够解决 插值表达式闪烁问题--> <p v-cloak>-----------{{msg}}-------------</p> <!--v-text会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的占位符,不会把整个元素的内容清空-...原创 2019-12-23 19:54:49 · 209 阅读 · 0 评论