- 博客(13)
- 收藏
- 关注
RSS订阅原创 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
353
原创 创建组件的几种方式
1.<div id="app"> //直接把组件的名称 以HTML 标签的形式引入到页面中 <mycom1></mycom1></div><script> // Vue.extend创建全局vue组件 var com1 = Vue.extend({ template:'<h1...
2020-01-02 11:23:36
335
原创 指令-让文本框获取焦点
<label> 搜索名称关键字： <input type="text" class="form-control" v-model="keywords" v-focus> </label>//定义全局的指令 //参数1：指令的名称 参数二：一个对象，对象里有一...
2019-12-28 10:05:25
259
原创 简易的增删查案例
<div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">增删查案例</h3> </div> <...
2019-12-25 11:10:45
123
原创 v-if和v-show的特点和使用
v-if：每次都会重新删除或创建元素（有较高的切换性能消耗）v-show：每次不会重新进行DOM元素的删除和创建操作，只是切换元素的display：none样式（有较高的初始渲染消耗）使用：如果元素涉及到频繁的切换，最好不要使用v-if；如果元素可能永远不会被显示出来，则推荐使用v-if...
2019-12-24 17:19:04
248
原创 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
780
原创 通过属性绑定为元素绑定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
130
原创 通过属性绑定为元素设置class类样式
<div id="app"> <!--直接传递一个数组 class需要用v-bind做数据绑定--> <!-- <h1 :class="['thin','red']">123456789</h1>--> <!--在数组中使用三元表达式--> <!-- <...
2019-12-24 15:50:22
166
原创 使用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
200
原创 事件修饰符
<style> .inner{ height: 150px; background-color: red; } .outer{ padding: 40px; background-color: green; } <...
2019-12-24 10:37:17
78
原创 文字跑马灯效果
<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
147
原创 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
197
原创 v-cloak、v-text、v-html
<div id="app"> <!--使用v-cloak能够解决 插值表达式闪烁问题--> <p v-cloak>-----------{{msg}}-------------</p> <!--v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的占位符，不会把整个元素的内容清空-...
2019-12-23 19:54:49
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人