Vue学习笔记（四）Vue指令

Vue中的指令是指带有v-前缀的特殊属性，Vue中通过指令实现一系列功能

条件渲染

---

通过使用和条件渲染相关的指令，可以控制元素是否渲染到页面上

v-if

v-if指令后值为true时显示（会隐式转为true的值也一样），为false时不显示，下面这段代码中，最后页面只有span1

<div id="app">
    <span v-if="flag">span1</span>
    <span v-if="!flag">span2</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

如果要让v-if控制多个标签，可以使用template标签将这些标签包裹起来，且最后渲染的时候不会出现template标签

<div id="app">
    <template v-if="flag">
        <span>span1</span>
        <span>span2</span>
    </template>
    <template v-if="!flag">
        <span>span3</span>
        <span>span4</span>
    </template>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

最后渲染得到的结果为

<div id="app">
    <span>span1</span> 
    <span>span2</span> 
    <!---->
</div>

v-show

v-show的用法与v-if类似，取决于后面的值是true还是false，下面的代码在页面渲染后还是只有span1

<div id="app">
    <span v-show="flag">span1</span>
    <span v-show="!flag">span2</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

v-if  VS  v-show

v-if和v-show都能使元素“消失”，但两者还是有所不同的，使用v-if时，若其后值为false，则在渲染时不会渲染该标签；而使用v-show时，若其后值为false，只是将该标签的display设置为none。

<div id="app">
    <span v-if="!flag">span1</span>
    <span v-show="!flag">span2</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

上面的代码在页面中会渲染为

<div id="app">
    <!----> 
    <span style="display: none;">span2</span>
</div>

可以看到，使用v-if的span标签不见了，而使用v-show的标签设置了display为none

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗，如果页面不经常更新的话，可以使用v-if，如果经常更新的话，使用v-show会更合理

除此之外，v-show无法使用template来包裹多个标签

v-else

v-else对应于v-if使用，用于实现两个标签一个显示一个隐藏的情况

<div id="app">
    <span v-if="flag">span1</span>
    <span v-else>span2</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

最后页面只显示span1

列表渲染

---

使用列表渲染可以直接渲染一组值，在Vue中使用v-for来实现，需要以item in items 的语法来实现，其中item是具体值成员，items是值所在的列表

数组内容渲染

使用v-for可以直接对一个数组内的值进行渲染

<div id="app">
    <li v-for="item in list">{{item}}</li>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            list: [1, 2, 3, 4]
        }
    });
</script>

渲染后的页面为

<div id="app">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</div>

对象属性渲染

对对象进行渲染时，渲染的内容是对象的属性值

<div id="app">
    <li v-for="item in obj">{{item}}</li>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                id: 1,
                name: '小明',
                age: 18
            }
        }
    });
</script>

渲染后的页面为

<div id="app">
    <li>1</li>
    <li>小明</li>
    <li>18</li>
</div>

如果要遍历键名的话，需要添加多一个值

<div id="app">
    <li v-for="(val,key) in obj">{{key}}:{{val}}</li>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                id: 1,
                name: '小明',
                age: 18
            }
        }
    });
</script>

渲染后的页面为

<div id="app">
    <li>id:1</li>
    <li>name:小明</li>
    <li>age:18</li>
</div>

整数迭代渲染

v-for也可以对一个整数进行迭代渲染，即从1到该整数

<div id="app">
    <li v-for="item in 4">{{item}}</li>
</div>

渲染后的页面为

<div id="app">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</div>

表单控件绑定

---

表单空间绑定通过v-model来实现，它可以根据控件类型来选取正确的方法更新数据。v-model只能在表单控件中使用。

文本

<div id="app">
    <input type="text" v-model="msg">
    <!-- <textarea v-model="msg"></textarea> -->
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        }
    });
</script>

这里在文本框输入内容时，msg会跟着进行更新，多行文本框也是一样的。

单选按钮

选择单选按钮时，会将该按钮的value值赋给v-model绑定的属性。

<div id="app">
    <input type="radio" value="first" v-model="radio">
    <label>first</label>
    <input type="radio" value="second" v-model="radio">
    <label>second</label>
    <br>
    <span>Checked names: {{ radio }}</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            radio: ""
        }
    });
</script>

复选框

对于单个复选框，复选框选中时值为true，没有选中时值为false

<div id="app">
    <input type="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            checked: false
        }
    });
</script>

当选中复选框时，checked会变为true，当再点取消选中时，checked就会变成false。

当有多个复选框时，点击复选框会把该复选框的value加入到v-model绑定的数组里。

<div id="app">
    <input type="checkbox" value="Jack" v-model="checkedNames">
    <label>Jack</label>
    <input type="checkbox" value="John" v-model="checkedNames">
    <label>John</label>
    <input type="checkbox" value="Mike" v-model="checkedNames">
    <label>Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            checkedNames: []
        }
    });
</script>

这里要注意的是，如果checkedNames不是数组，而是一个值的话，在选中复选框时该值会变成true。checkedNames可以是一个非空的数组。

单选列表

单选列表会将选中的option值传给v-model绑定的值

<div id="app">
    <select v-model="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
    <p>{{select}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            select: ""
        }
    });
</script>

多选列表

单选列表会将选中的option值加入到v-model绑定的数组

<div id="app">
    <select v-model="select" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <p>{{select}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            select: []
        }
    });
</script>

修饰符

lazy

默认情况下，v-model在input中是与输入同步的，而使用了lazy修饰符后会与change同步，即在输入时不会随着输入改变，而焦点离开该input后如果值改变，则会跟着改变

<div id="app">
    <input type="text" v-model.lazy="msg">
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        }
    });
</script>

number

number修饰符会将用户的输入值转为number类型，如果原值转换类型为NaN则变回原值

<div id="app">
    <input type="text" v-model.number="msg">
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        }
    });
</script>

trim

trim会过滤输入框内容的首尾空格

<div id="app">
    <input type="text" v-model.trim="msg">
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        }
    });
</script>