引子
前面我们已经陆续介绍了 Vue.js 框架的常用基本语法,现在,我们可以结合这些语法实现一个小功能:展示一个 Web 框架列表,并支持新增框架。
在 vue_learning/basic
目录下新建一个 computed.html
保存本篇教程的代码,然后编写上述功能的实现代码如下:
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性示例代码title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
<style>.php {
color: cornflowerblue;
}.javascript {
color: gold;
}.golang {
color: aqua;
}.python {
color: darkgreen;
}style>
head>
<body>
<div id="app">
<p>Web开发框架:p>
<ul>
<li v-for="framework in frameworks" :class="framework.language">
{
{ framework.name }}
li>
ul>