最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue第七节:实战前必须掌握的10个指令(上)

Vuejs rockyxia 2944浏览

写在前面

这一节我们来学习并掌握在实战用一定会用到的10个指令,没错,是一定会用到,通过这些指令,可以让我们很方便的完成某些操作。掌握了这几个指令,我们距离实战就又近了一步。

1. v-text 指令

v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样。我们看看它的用法:

<div id="app">
  <p v-text="msg"></p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      msg:'hello,vue'
    }
  });
</script>

我们给<p></p>标签加上了指令 v-text ,它的值就是我们data数据中的msg,就这么简单,最后我们来看看渲染结果:

(渲染成功)

有没有发现,它的作用跟{{ msg }}效果是一样的:

<p v-text="msg"></p>
<!--效果相同-->
<p>{{ msg }}</p>

2. v-html 指令

这个指令我们再上一节刚刚讲过,它帮助我们绑定一些包含html代码的数据在视图上,比如:“<b>hello,vue</b>”,这个字符串包含了<b>标签,要想<b>不被当作普通的字符串渲染出来,就得用 v-html 指令。

<div id="app">
  <p v-html="msg"></p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      msg:'<b>hello,vue</b>'
    }
  });
</script>

还是上面的代码,我们把 v-text 指令换成 v-html 指令,msg的值变成了含有html代码的:“<b>hello,vue</b>”,我们看看渲染效果:

(效果图)

就这样,<b>标签被成功解析并渲染出来,视图上的文本也有了加粗的效果,这就是v-html发挥了作用,bingo!

3. v-show 指令

v-show ,听这名字就可以猜测它跟元素的显示/隐藏 相关,没错,它就是用来控制元素的display css属性的。

v-show 指令的取值为true/false,分别对应着显示/隐藏。有比较才能看到效果,我们拿两个标签分别设置不同的值,看看解析渲染效果。

<div id="app">
  <p v-show="show1">我是true</p>
  <p v-show="show2">我是false</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      show1:true,
      show2:false
    }
  });
</script>

我们用了两个<p>标签,都加上了 v-show 指令,取值分别为true和fasle,直接看效果吧!

(效果图)

第一个p标签的v-show设置为true,元素正常显示;第二个p标签的v-show设置为false,元素解析成:

<p style="display: none">我是false</p>

所以它不会显示在视图上。这就是 v-show 指令的用法,简单明了。

4. v-if 指令

v-if 指令的取值也是为true或false,它控制元素是否需要被渲染出来,听起来有点抽象,不怕,同样,我们拿两个元素设置不用的值,对比一下看效果就知道了。

<div id="app">
  <p v-if="if_1">我是true</p>
  <p v-if="if_2">我是true</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      if_1:true,
      if_2:false
    }
  });
</script>

我们把 v-show 指令换成了 v-if ,同样是两个<p>标签,同样是不同的取值:true和false。我们看效果:

(效果图)

看到了吧,设置为true的<p>标签,成功渲染出来,而设置为false的<p>标签,直接被一行注释代替了,并没有被解析渲染出来。

也许你会问了, v-showv-if 都能控制元素显示或者隐藏,这两个怎么区别使用呢?

记住一点:如果需要频繁切换显示/隐藏的,就用 v-show ;如果运行后不太可能切换显示/隐藏的,就用 v-if

5. v-else 指令

if和else在编程语言一般都是结对出现的,在vue里面也不例外。它没有对应的值,但是要求前一个兄弟节点必须要使用 v-if 指令,也对,没有if,哪来的else。

<div id="app">
  <p v-if="if_1">我是if</p>
  <p v-else>我是else</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      if_1:false
    }
  });
</script>

我们使用两个<p>标签,第一个使用 v-if 指令,并取值为false,第二个使用 v-esle 指令,啥也不说了,看效果最直观:

(效果图)

只有第二个<p>标签被渲染出来,第一个<p>标签由于 v-if 指令的值为false,直接被忽视了,不渲染。

同理,一旦第一个标签的 v-if 指令的值为true,被忽视的就是第二个<p>标签了。 v-ifv-else 只有一个会被渲染出来。

有兴趣的同学,可以继续去了解一下 v-else-if 指令,同样很简单。

本节小结

学完本节,你应该掌握了 v-textv-htmlv-showv-ifv-else 这5个指令的用法,并能区别使用 v-ifv-show 这2个指令。

后面章节的实战的时候,这些都是会用到的指令,所以要先掌握好,下一章节,我们继续介绍剩下的5个十分重要指令。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第七节:实战前必须掌握的10个指令(上)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)