Vue.js 条件和循环
在所有编程语言中都使用条件和循环来提供重复的控制结构。他们可以根据条件重复一个或多个步骤。在
Vue.js 的情况下也可以使用。
v-if指令示例
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">This is visible to you</span>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
注意: 在这里，我们使用了一个简单的CSS文件来使输出更具吸引力。以下所有示例的CSS文件都相同。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
输出:
在上述示例中，如果输入
app3.seen = false ，您会看到消息消失。
示例2:
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">This is visible to you</span>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app = new Vue({
el: '#app',
data: {
seen: false
}
})
输出:
在上面的示例中，您可以看到不仅可以将数据绑定到文本和属性，还可以将其绑定到DOM的结构。 Vue还提供了功能强大的过渡效果系统，当Vue插入，更新或删除元素时，该系统可以自动应用过渡效果。
v-else-if指令示例
在上面的示例中，我们可以使用v-else-if指令提供else功能。通过使用此伪指令，如果不满足条件或不满足条件，则它将返回您为程序设置的else语句。让我们看一个例子。
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">Now you see me</span>
<span v-else-if=>You can't see me </span>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app = new Vue({
el: '#app',
data: {
seen: false
}
})
输出:
在上面的示例中，您可以看到输出显示为"您看不到我"，并将其设置为v-else-if语句。 Vue.js中还有一些其他指令可。其自身的特殊功能。
v-for指令示例
v-for指令是。使用数组中的数据显示项目列表。请参见以下示例。
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'HTML 教程' },
{ text: 'CSS 教程' },
{ text: 'JavaScript 教程' },
{ text: 'AngularJS 教程' },
{ text: 'Vue.js 教程' }
]
}
})
输出:
HTML 教程 CSS 教程 JavaScript 教程 AngularJS 教程 Vue.js 教程
输出:
处理用户输入
v-on指令有助于用户与您的Vue.js应用进行交互。它。附加在Vue实例上调用方法的事件侦听器。让我们看一下v-on指令的示例。
v-on指令示例
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Click Here to Reverse Message</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app = new Vue({
el: '#app',
data: {
message: 'This is Vue.js Example!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
输出:
单击"单击此处以反转消息"按钮后，以上字符串将被反转。
在上面的示例中，无需触摸DOM即可更新应用程序。所有DOM操作都由Vue本身处理。
v-model指令示例
v模型指令。在表单输入之间进行双向数据绑定。和应用状态。请参见以下示例:
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app6 = new Vue({
el: '#app',
data: {
message: 'Two way data binding!'
}
})
输出:
在上面的示例中，您将看到数据的自动同步。当您更改一个组件中的数据时，更改将反映在两个组件中。参见以下示例:
组件化
当我们要构建由小型，独立且经常可重复使用的组件组成的大规模应用程序时，将使用组件系统。大型应用程序接口可以抽象为组件树:
在这里，我们使用v-bind指令在重复的组件中传递值。请参见以下示例:
Index.html文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-course
v-for="course in courseList"
v-bind:todo="course"
v-bind:key="course.id"
></todo-course>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
Vue.component('todo-course', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
courseList: [
{ id: 0, text: 'Java' },
{ id: 1, text: 'PHP' },
{ id: 2, text: 'Angular' },
{ id: 3, text: 'Vue.js' }
]
}
})
输出:
