Vue.js的常用指令-vue.js

vue.js的常用指令

vue.js是指令已v-开头的,他们作用于HTML元素,指令提供了一些特殊的特性,将指令绑在元素上时,指令回味绑定的目标元素添加一些特殊的行为,我们可以将指令看做特殊的HTML特性

vue.js提供了一些常用的内置指令,接下来我们将介绍v-if指令

v-if是条件渲染指令,他根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if=”expression”

expression是一个返回bool值的表达式,表达式可以使一个bool属性,也可以返回一个bool的运算时。列如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

注意:yes no age name 这四个变量都来源于vue实例选项对象的DATA属性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章