07、实战前必须掌握的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>
效果图.png

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>
效果图.png

3.v-show 指令



v-show,主要就是控制元素的 display css 属性的。
当 v-show 为 false 时,display 为 none;
当 v-show 为 true 时,display 为 元素的默认属性。

4.v-if 指令



v-if 与 v-show 不同的是,v-show 控制的是 元素的 display 属性值,而 v-if 直接控制元素是否渲染,也就是显示或者移除元素节点。

5.v-else 指令



v-else 与 v-if 一般来说是成对出现的,有 v-else 必须有 v-if,而有 v-if 可以没有 v-else。

<div id="app">
  <p v-if="show">v-if</p>
  <p v-else>v-else</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false
    }
  })
</script>

效果如下图所示:


效果图.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容