Vue学习之常用的指令

2018年8月12日17:40:26 3 阅读(2,964)

业精于勤,行成于思。本文写一下Vue常用的几个指令,具体来说分别是:v-html,v-if,v-show,v-else,v-for,v-bind以及v-on这七个指令。

v-html

v-html指令可以输出html代码:

  1. <div id="app">
  2.     <div v-html="msg"></div>
  3. </div>
  4. <script>
  5. new Vue({
  6.   el: '#app',
  7.   data: {
  8.     msg: '<h1>Hello,Vue.js!</h1>'
  9.   }
  10. })
  11. </script>
  12. <div id="app">
  13.     <div v-html="msg"></div>
  14. </div>

v-if

v-if 是条件渲染指令,只有满足条件才会渲染元素,根据表达式的布尔值来进行判断:

  1. <div id="app2">  
  2.     <p v-if="seen">现在你看到我了</p>  
  3.     <p v-if="look">你看不到我了吧</p>  
  4. </div>  
  5.       
  6. <script>  
  7. new Vue({  
  8.   el: '#app2',  
  9.   data: {  
  10.     seen: true,  
  11.     look: false  
  12.   }  
  13. })  
  14. </script>  

当look值为false的时候,v-if不会渲染值为false的元素:
Vue学习之常用的指令

现在你看到我了

你看不到我了吧

v-show

v-show指令,与v-if指令相同的是都是根据表达式的布尔值来渲染,与v-if指令不同的是,v-show指令会渲染布尔值为true&&false的元素,并且会在布尔值为false的元素上添加style="display:none"的css代码:

  1. <div id="app">  
  2.     <p v-show="seen">现在你看到我了</p>  
  3.     <p v-show="look">你看不到我了吧</p>  
  4. </div>  
  5.       
  6. <script>  
  7. new Vue({  
  8.   el: '#app',  
  9.   data: {  
  10.     seen: true,  
  11.     look: false  
  12.   }  
  13. })  
  14. </script>  

上接v-if指令,当我们把v-if换为v-show后,会发现表面效果一样,其实不然:
Vue学习之常用的指令

现在你看到我了

你看不到我了吧

v-else

v-else指令必须跟在v-if或v-else-if 指令之后,不然不起作用,如果v-if指令的表达式为false则显示else元素在页面上,反之不显示:

  1. <div id="app4">  
  2.     <div v-if="type == 'A'">A</div>  
  3.     <div v-else-if="type == 'B'">B</div>  
  4.     <div v-else-if="type == 'C'">C</div>  
  5.     <div v-else>type!=A/B/C</div>  
  6. </div>  
  7.       
  8. <script>  
  9. new Vue({  
  10.   el: '#app4',  
  11.   data: {  
  12.     type: 'D'  
  13.   }  
  14. })  
  15. </script>  
A
B
C
type!=A/B/C

v-for

v-for 指令需要以 site in sites 形式的特殊语法,用法为 v-for="site in sites", sites 是源数据数组,site是数组元素迭代的别名:

  1. <style>  
  2. table,td,th {  
  3.     border-collapse: collapse;  
  4.     border-spacing: 0  
  5. }  
  6.   
  7. table {  
  8.     width: 100%;  
  9. }  
  10.   
  11. td,th {  
  12.     border: 1px solid #bcbcbc;  
  13.     padding: 5px 10px;  
  14. }  
  15.   
  16. th {  
  17.     background: #42b983;  
  18.     font-size: 1.2rem;  
  19.     font-weight: 400;  
  20.     color: #fff;  
  21.     cursor: pointer;  
  22. }  
  23. </style>  
  24. <div id="app5">  
  25.     <table>  
  26.          <thead>  
  27.              <tr>  
  28.                  <th>Name</th>  
  29.                  <th>Age</th>  
  30.                  <th>Sex</th>  
  31.             </tr>  
  32.             </thead>  
  33.         <tbody>  
  34.             <tr v-for="value in people">  
  35.                 <td>{{ value.name  }}</td>  
  36.                 <td>{{ value.age  }}</td>  
  37.                 <td>{{ value.sex  }}</td>  
  38.             </tr>  
  39.         </tbody>  
  40.       </table>  
  41. </div>  
  42. <script>  
  43.     var vm = new Vue({  
  44.             el: '#app5',  
  45.             data: {  
  46.                 people: [{  
  47.                     name: '张三',  
  48.                     age: 30,  
  49.                     sex: 'Male'  
  50.                 }, {  
  51.                     name: '李四',  
  52.                     age: 26,  
  53.                     sex: 'Male'  
  54.                 }, {  
  55.                     name: '赵钱',  
  56.                     age: 22,  
  57.                     sex: 'Female'  
  58.                 }, {  
  59.                     name: '孙五',  
  60.                     age: 36,  
  61.                     sex: 'Male'  
  62.                 }]  
  63.             }  
  64.         })  
  65.     </script>  
Name Age Sex
{{ value.name }} {{ value.age }} {{ value.sex }}

v-bind

v-bind指令用来绑定样式,当指定样式的值为true时,则显示该样式:

  1. <style>  
  2. .active {  
  3.     width: 100px;  
  4.     height: 100px;  
  5.     background: #409EFF;  
  6. }  
  7. </style>  
  8. <div id="app6">  
  9.   <div v-bind:class="{ active: isActive }"></div>  
  10. </div>  
  11.   
  12. <script>  
  13. new Vue({  
  14.   el: '#app6',  
  15.   data: {  
  16.     isActive: true  
  17.   }  
  18. })  
  19. </script>  

v-on

v-on指令用来事件监听,通常情况下,我们需要使用一个方法来调用 JavaScript 方法,或者使用内联JavaScript语句:

  1. <div id="app7">  
  2.        <p><input type="text" v-model="message"></p>  
  3.        <p>  
  4.            <!--click事件直接绑定一个方法-->  
  5.            <button v-on:click="greet">Greet</button>  
  6.            <!--click事件使用内联语句-->  
  7.            <button v-on:click="say('Hi')">SayHi</button>  
  8.       </p>  
  9. </div>  
  10. <script>  
  11.     var vm = new Vue({  
  12.             el: '#app7',  
  13.             data: {  
  14.                 message: 'Hello, Vue.js!'  
  15.             },  
  16.             // 在 `methods` 对象中定义方法  
  17.             methods: {  
  18.                 greet: function() {  
  19.                     // // 方法内 `this` 指向 vm  
  20.                     alert(this.message)  
  21.                 },  
  22.                 say: function(msg) {  
  23.                     alert(msg)  
  24.                 }  
  25.             }  
  26.         })  
  27. </script>  

  

Tips

其中两个指令v-bind和v-on提供了缩写方式。
v-bind缩写:":"。举例:
Vue学习之常用的指令
v-on缩写:"@"。举例:
Vue学习之常用的指令

纸上得来终觉浅,绝知此事要躬行。

完。


weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:3   其中:访客  2   博主  1

    • huangjun huangjun 0

      VUE??你是那个视频编辑软件吗?

        • 舍得 舍得

          @huangjun 不是,全称vue.js

        • 大树 大树 0

          谢谢分享,学习了