vue.js初学2之vue指令①

xiaoxiao2021-02-28  19

入了个门,接下来,就要开始学一些跟vue有关的指令了

1.vue-bind指令

作用:绑定元素属性

语法:v-bind:属性

exp:

<!--html代码--> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div>

var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })

exp效果:鼠标在文字上停留一会后会出现,当前页面加载完成的时间,也就是将message中的信息绑定到了span的title中,同样对应标签有对应的属性也可以用这种方法进行绑定

2.vue-if指令

作用:根据表达式的值,用来添加/删除元素

语法:v-if=表达式(绑定的值为false就删除此元素,若为true则添加此元素)

<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) exp效果:seen此时为true,则元素p可见,若将seen的值改为false,则看不到p元素

注意:v-if若为false是相当于把这个元素删掉,即在整一篇DOM文档中是找不到这个元素的

            v-if有一个对应的指令,即v-else,若值为true则删除,若值为false则添加

3.vue-show指令

作用:根据表达式的值,用来显示/隐藏元素

语法:v-show=表达式(绑定的值为false就隐藏此元素,若为true则显示此元素)

exp:

<div id="app-3"> <p v-show="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } })

exp效果:seen此时为true,则元素p可见,若将seen的值改为false,则看不到p元素

注意: v-show有一个对应的指令,即v-hide,若值为true则删除,若值为false则添加

比较:v-show是将元素进行隐藏,而v-if是将元素删除,一个可寻,一个不可寻

转载请注明原文地址: https://www.6miu.com/read-1400179.html

最新回复(0)