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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。