VueJs入门练习-指令(1)

1. v-once 只绑定一次

<div id="app_1">
    <p>{{text}}</p>
    <p v-once>{{text}}</p>
    <input v-model="text">
</div>

var app = new Vue({
    el: "#app_1",
    data: {
        text: 'Hello Vue!'
    }
})

使用v-model可以双向绑定节点和数值，如果只需要绑定一次，则可以使用v-once, 老版本的Vue中使用 {{*text}}, 新版本中不兼容这种方式。

2. 条件指令 v-if 和 v-show

当需要动态绑定节点是否显示，可以使用v-if或v-show

2-1 v-if

<div id="app_2">
    <p v-if="show">Hello React!</p>
    <p v-if="!show">Hello Vue!</p>
</div><br/>

var app_2 = new Vue({
    el: '#app_2',
    data: {
        show: false
    }
})

运行效果：

2-2 v-show

<div id="app_3">
    <p v-show="show">Hello Android!</p>
    <p v-show="!show">Hello IOS!</p>
</div><br/>

var app_3 = new Vue({
    el: '#app_3',
    data : {
        show: false
    }
})

［v-if和v-show的区别］

v-show不支持<template>语法，v-if支持;

v-if是惰性的，在初始渲染时条件为假，则不去绘制，条件首次为真时采取开始局部编译并缓存编译结果，v-show在初始化渲染时会将所有节点都进行渲染，然后在添加为假的节点的CSS属性中加入display=none来隐藏该节点；

一般情况下，v-if的切换(移除和添加)消耗比较大,v-show的初始化渲染消耗更大; 若需要频繁切换，则使用v-show, 若节点在首次渲染完成之后不太可能发生切换，则使用v-if。

3. v-model在表单节点上创建数据双向绑定

<div id="app">
    <p>
        {{person.name}}
        <input v-model="person.name">
    </p>

    <p>
        {{person.sex}}
        <input type="radio" v-model="person.sex" value="Male" id="male"><label for="male">男</label>
        <input type="radio" v-model="person.sex" value="Female" id="female"><label for="female">女</label>
    </p>

    <p>
        {{person.interest}}<br/>
        <input type="checkbox" v-model="person.interest" value="Swim" id="swim"><label for="swim">游泳</label>
        <input type="checkbox" v-model="person.interest" value="Football" id="football"><label for="football">足球</label>
        <input type="checkbox" v-model="person.interest" value="Baskgetball" id="basketball"><label for="basketball">篮球</label>
        <input type="checkbox" v-model="person.interest" value="ReadBook" id="readBook"><label for="readBook">读书</label>
    </p>

    <p>
        {{person.identity}}
        <select v-model="person.identity">
            <option value="Student">学生</option>
            <option value="Teacher">教师</option>
            <option value="Doctor">医生</option>
        </select>
    </p>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            person: {
                name: '输入姓名',
                sex: 'Male',
                interest: ['Football'],
                identity: 'Teacher'
            }
        }
    })
</script>

4. 循环指令 v-for

<div id="app">
    <ul>
        <li v-for="item in items" :class="item.className">{{item.name}}</li>
    </ul>
</div>

上面使用Vue动态制定了li节点的class。

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {
                    name: '北京',
                    className: 'Beijing'
                },
                {
                    name: '上海',
                    className: 'Shanghai'
                },
                {
                    name: '广州',
                    className: 'Guangzhou'
                }
            ]
        }
    })
</script>

对应的CSS属性：

<style type="text/css">
    .Beijing{color:dodgerblue}
    .Shanghai{color:orangered}
    .Guangzhou{color:limegreen}
</style>

上面的代码展示了v-for绑定数组元素，v-for还可以循环展示Object：

<div id="app">
    <ul>
        <li v-for="(item, key) in itemValues">{{key}} - {{item.college}} : {{item.name}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            itemValues: {
                Wuhan: {
                    name: "武汉",
                    college: "华中科技大学"
                },
                Hangzhou: {
                    name: "杭州",
                    college: "浙江大学"
                },
                Sichuan: {
                    name: "四川",
                    college: "四川大学"
                }
            }
        }
    })
</script>

v-for还有一种渲染方法：

<div id="app">
    <ul>
        <li v-for="i in 3">{{i}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {}
    })
</script>

5. v-text 和 v-html绑定数据

<div id="app">
    <p v-text="textContent"></p>
    <!-- Same as -->
    <p>{{textContent}}</p>

    <input v-model="textContent">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            textContent: 'Hello Vue!'
        }
    })
</script>

若果需要绑定的文本内容是一段html代码，需要使用v-html进行绑定:

<div id="app">
    <p v-html="htmlContent"></p>

    <input v-model="htmlContent">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            htmlContent: "<span style='color: red'></span>"
        }
    })
</script>

VueJs入门练习-指令(1)

猜你喜欢