欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js内部指令解析

程序员文章站 2022-05-16 09:44:54
vue.js内部指令解析 npm n install live-server -g {{message}} var app=new vue({ el:'#app...

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://ang.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时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。