频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
vue.js内部指令解析
2018-11-10 11:54:44           
收藏   我要投稿

vue.js内部指令解析

npm n install live-server -g

{{message}}

var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } }) //此为vue.js的基本模板

v-if&v-else&v-show

设置display,是否隐藏

登陆成功

请登录

v-if为true则执行登陆成功,为false显示请登录

v-show为true,就设置display,v-show为false就设置隐藏

v-for

{{item}}

v-for将显示sortitem.length个

v-text

var app=new Vue({ el:'#app', data:{ message:'hello Vue!', msgHtml:'

hello Vue!

' } })

v-text就是要显示的纯文本

v-html是要显示的html标签

v-on:click

本场比赛得分: {{count}}加分减分

methods:{

jiafen:function(){

this.count++;

},

jianfen:function(){

this.count--;

}

}

v-on绑定事件,函数卸载methods中

v-model

v-model

v-model.lazy

v-model.number

v-model双向绑定,input输入框会改变message值,

v-model.lazy省略空格,多个空格识别成一个

v-model.number先输入数字就只能识别数字

v-bind

jishupang

1、绑定classA

2,绑定class的判断

3,绑定class的数组

4,绑定class的3元判断

5、绑定style

6、用对象绑定style样式

var app=new Vue({ el:'#app', data:{ imgsrc:'https://jspang.com/wp-content/uploads/2018/02/bbbb.jpg', url:'https://jspang.com/category/learn/vue2/', className:'classA', classA:'classA', classB:'classB', isOk:false, styleObject:{ fontSize:'24px', color:'green' } } })

动态绑定src的值,v-bind:src,缩写:src

3,绑定class的数组绑定两个类值 6、用对象绑定style样式绑定style的对象

其他指令

[v-cloak] {

display: none;

}

{{message}}

{{ message }}

{{message}}

{{message}}

{{message}}

这时并不会输出我们的message值,而是直接在网页中显示{{message}}

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用.

v-once指令

在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。

点击复制链接 与好友分享!回本站首页
上一篇:滚动/滑动模块的实现
下一篇:js缓动动画封装源码
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站