业精于勤,行成于思。本文写一下Vue常用的几个指令,具体来说分别是:v-html,v-if,v-show,v-else,v-for,v-bind以及v-on这七个指令。
v-html
v-html指令可以输出html代码:
- <div id="app">
- <div v-html="msg"></div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- msg: '<h1>Hello,Vue.js!</h1>'
- }
- })
- </script>
- <div id="app">
- <div v-html="msg"></div>
- </div>
v-if
v-if 是条件渲染指令,只有满足条件才会渲染元素,根据表达式的布尔值来进行判断:
- <div id="app2">
- <p v-if="seen">现在你看到我了</p>
- <p v-if="look">你看不到我了吧</p>
- </div>
- <script>
- new Vue({
- el: '#app2',
- data: {
- seen: true,
- look: false
- }
- })
- </script>
当look值为false的时候,v-if不会渲染值为false的元素:
现在你看到我了
你看不到我了吧
v-show
v-show指令,与v-if指令相同的是都是根据表达式的布尔值来渲染,与v-if指令不同的是,v-show指令会渲染布尔值为true&&false的元素,并且会在布尔值为false的元素上添加style="display:none"的css代码:
- <div id="app">
- <p v-show="seen">现在你看到我了</p>
- <p v-show="look">你看不到我了吧</p>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- seen: true,
- look: false
- }
- })
- </script>
上接v-if指令,当我们把v-if换为v-show后,会发现表面效果一样,其实不然:
现在你看到我了
你看不到我了吧
v-else
v-else指令必须跟在v-if或v-else-if 指令之后,不然不起作用,如果v-if指令的表达式为false则显示else元素在页面上,反之不显示:
- <div id="app4">
- <div v-if="type == 'A'">A</div>
- <div v-else-if="type == 'B'">B</div>
- <div v-else-if="type == 'C'">C</div>
- <div v-else>type!=A/B/C</div>
- </div>
- <script>
- new Vue({
- el: '#app4',
- data: {
- type: 'D'
- }
- })
- </script>
v-for
v-for 指令需要以 site in sites 形式的特殊语法,用法为 v-for="site in sites", sites 是源数据数组,site是数组元素迭代的别名:
- <style>
- table,td,th {
- border-collapse: collapse;
- border-spacing: 0
- }
- table {
- width: 100%;
- }
- td,th {
- border: 1px solid #bcbcbc;
- padding: 5px 10px;
- }
- th {
- background: #42b983;
- font-size: 1.2rem;
- font-weight: 400;
- color: #fff;
- cursor: pointer;
- }
- </style>
- <div id="app5">
- <table>
- <thead>
- <tr>
- <th>Name</th>
- <th>Age</th>
- <th>Sex</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="value in people">
- <td>{{ value.name }}</td>
- <td>{{ value.age }}</td>
- <td>{{ value.sex }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- <script>
- var vm = new Vue({
- el: '#app5',
- data: {
- people: [{
- name: '张三',
- age: 30,
- sex: 'Male'
- }, {
- name: '李四',
- age: 26,
- sex: 'Male'
- }, {
- name: '赵钱',
- age: 22,
- sex: 'Female'
- }, {
- name: '孙五',
- age: 36,
- sex: 'Male'
- }]
- }
- })
- </script>
Name | Age | Sex |
---|---|---|
{{ value.name }} | {{ value.age }} | {{ value.sex }} |
v-bind
v-bind指令用来绑定样式,当指定样式的值为true时,则显示该样式:
- <style>
- .active {
- width: 100px;
- height: 100px;
- background: #409EFF;
- }
- </style>
- <div id="app6">
- <div v-bind:class="{ active: isActive }"></div>
- </div>
- <script>
- new Vue({
- el: '#app6',
- data: {
- isActive: true
- }
- })
- </script>
v-on
v-on指令用来事件监听,通常情况下,我们需要使用一个方法来调用 JavaScript 方法,或者使用内联JavaScript语句:
- <div id="app7">
- <p><input type="text" v-model="message"></p>
- <p>
- <!--click事件直接绑定一个方法-->
- <button v-on:click="greet">Greet</button>
- <!--click事件使用内联语句-->
- <button v-on:click="say('Hi')">SayHi</button>
- </p>
- </div>
- <script>
- var vm = new Vue({
- el: '#app7',
- data: {
- message: 'Hello, Vue.js!'
- },
- // 在 `methods` 对象中定义方法
- methods: {
- greet: function() {
- // // 方法内 `this` 指向 vm
- alert(this.message)
- },
- say: function(msg) {
- alert(msg)
- }
- }
- })
- </script>
Tips
其中两个指令v-bind和v-on提供了缩写方式。
v-bind缩写:":"。举例:
v-on缩写:"@"。举例:
纸上得来终觉浅,绝知此事要躬行。
完。
2018年8月22日 下午5:09
VUE??你是那个视频编辑软件吗?
2018年8月22日 下午5:19
@huangjun 不是,全称vue.js
2018年8月17日 下午11:03
谢谢分享,学习了