vue的基本语法

标签：学习   实例   var   https   cdn   uil   tle   todo   bsp   

1.v-bind:

v-bind attribute 被称为指令,在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

<div id="app">

<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>

</div>

var vm = new Vue({

el: ‘#app‘,

data: { message: ‘页面加载于 ‘ 

}

})

控制台输出 vm.message="点我"

//鼠标悬停 提示信息由 ‘页面加载于 ‘ 变成"点我"

2.判断

默认输出yes，控制台vm.message=false输出no

<div id="app">
    <h1 v-if="message">yes</h1>
    <h1 v-else>no</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

    var vm = new Vue({
        el: ‘#app‘,
        data: {
            message: true
        }
    })

</script>
3.for循循环

<!--v-for 指令可以绑定数组的数据来渲染一个项目-->

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            todos: [
                { text: ‘学习 JavaScript‘ },
                { text: ‘学习 Vue‘ },
                { text: ‘整个牛项目‘ }
            ]
        }
    })
</script>

vue的基本语法

标签：学习   实例   var   https   cdn   uil   tle   todo   bsp   

原文地址：https://www.cnblogs.com/tdtl/p/14403858.html