Vue(1)

1.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>vuetest<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="vue.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>       <span style="color: #008000"><!--</span><span style="color: #008000"> view </span><span style="color: #008000">--></span>
<span style="color: #008080">10</span>       <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="vue_id"</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>         {{message}}  <span style="color: #008000"><!--</span><span style="color: #008000">文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换</span><span style="color: #008000">--></span>
<span style="color: #008080">12</span>         <span style="color: #0000ff"><</span><span style="color: #800000">br</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span> <span style="color: #000000">        {{age}}
</span><span style="color: #008080">14</span>       <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">15</span> 
<span style="color: #008080">16</span>       <span style="color: #008000"><!--</span><span style="color: #008000"> model </span><span style="color: #008000">--></span>
<span style="color: #008080">17</span>       <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span>
<span style="color: #008080">18</span>         <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> text</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">{
</span><span style="color: #008080">19</span> <span style="background-color: #f5f5f5; color: #000000">          message:</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">Hello World!</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">20</span> <span style="background-color: #f5f5f5; color: #000000">          age:</span><span style="background-color: #f5f5f5; color: #000000">16</span>
<span style="color: #008080">21</span> <span style="background-color: #f5f5f5; color: #000000">        }
</span><span style="color: #008080">22</span> 
<span style="color: #008080">23</span>         <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000"> 创建一个Vue,；连接view和Model</span>
<span style="color: #008080">24</span>         <span style="background-color: #f5f5f5; color: #0000ff">new</span><span style="background-color: #f5f5f5; color: #000000"> Vue({
</span><span style="color: #008080">25</span> <span style="background-color: #f5f5f5; color: #000000">          el:</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">#vue_id</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">该Vue实例将挂载到<div id="app">...</div>这个元素</span>
<span style="color: #008080">26</span> <span style="background-color: #f5f5f5; color: #000000">          data:text </span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">data属性指向Model，data:text表示我们的Model是text对象。</span>
<span style="color: #008080">27</span> <span style="background-color: #f5f5f5; color: #000000">        })
</span><span style="color: #008080">28</span> 
<span style="color: #008080">29</span>       <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">30</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">31</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

2. Two-way data binding

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>vuetest<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="vue.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>       <span style="color: #008000"><!--</span><span style="color: #008000"> view </span><span style="color: #008000">--></span>
<span style="color: #008080">10</span>       <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="app"</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>         <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>{{message}}<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>         <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">=""</span><span style="color: #ff0000"> v-model</span><span style="color: #0000ff">="message"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。更改input的内容，p标签的内容也同时变化，在浏览器控制台中更改exampleData.message的值，input文本框的内容也会发生变化。</span><span style="color: #008000">--></span>
<span style="color: #008080">13</span>       <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span>       <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">15</span>         <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000"> 这是我们的Model</span>
<span style="color: #008080">16</span>         <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> exampleData </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> {
</span><span style="color: #008080">17</span> <span style="background-color: #f5f5f5; color: #000000">            message: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Hello World!</span><span style="background-color: #f5f5f5; color: #000000">'</span>
<span style="color: #008080">18</span> <span style="background-color: #f5f5f5; color: #000000">        }
</span><span style="color: #008080">19</span> 
<span style="color: #008080">20</span>         <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000"> 创建一个 Vue 实例或 "ViewModel"</span>
<span style="color: #008080">21</span>         <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000"> 它连接 View 与 Model</span>
<span style="color: #008080">22</span>         <span style="background-color: #f5f5f5; color: #0000ff">new</span><span style="background-color: #f5f5f5; color: #000000"> Vue({
</span><span style="color: #008080">23</span> <span style="background-color: #f5f5f5; color: #000000">            el: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">#app</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">24</span> <span style="background-color: #f5f5f5; color: #000000">            data: exampleData
</span><span style="color: #008080">25</span> <span style="background-color: #f5f5f5; color: #000000">        })
</span><span style="color: #008080">26</span>     <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">27</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">28</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

3.v-if

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="app"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>             <span style="color: #0000ff"><</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>Hello, Vue.js!<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>             <span style="color: #0000ff"><</span><span style="color: #800000">h1 </span><span style="color: #ff0000">v-if</span><span style="color: #0000ff">="yes"</span><span style="color: #0000ff">></span>Yes!<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000"> v-if是条件渲染指令，它根据表达式的真假来删除和插入元素 </span><span style="color: #008000">--></span>
<span style="color: #008080">11</span>             <span style="color: #0000ff"><</span><span style="color: #800000">h1 </span><span style="color: #ff0000">v-if</span><span style="color: #0000ff">="no"</span><span style="color: #0000ff">></span>No!<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>             <span style="color: #0000ff"><</span><span style="color: #800000">h1 </span><span style="color: #ff0000">v-if</span><span style="color: #0000ff">="age >= 25"</span><span style="color: #0000ff">></span>Age: {{ age }}<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>             <span style="color: #0000ff"><</span><span style="color: #800000">h1 </span><span style="color: #ff0000">v-if</span><span style="color: #0000ff">="name.indexOf('jack') >= 0"</span><span style="color: #0000ff">></span>Name: {{ name }}<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000"> indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 </span><span style="color: #008000">--></span>
<span style="color: #008080">14</span>         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">15</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">16</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="vue.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">17</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">18</span>         
<span style="color: #008080">19</span>         <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> vm </span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #0000ff">new</span><span style="background-color: #f5f5f5; color: #000000"> Vue({
</span><span style="color: #008080">20</span> <span style="background-color: #f5f5f5; color: #000000">            el: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">#app</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">21</span> <span style="background-color: #f5f5f5; color: #000000">            data: {
</span><span style="color: #008080">22</span> <span style="background-color: #f5f5f5; color: #000000">                yes: </span><span style="background-color: #f5f5f5; color: #0000ff">true</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">显示</span>
<span style="color: #008080">23</span> <span style="background-color: #f5f5f5; color: #000000">                no: </span><span style="background-color: #f5f5f5; color: #0000ff">false</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">不显示</span>
<span style="color: #008080">24</span> <span style="background-color: #f5f5f5; color: #000000">                age: </span><span style="background-color: #f5f5f5; color: #000000">28</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">显示</span>
<span style="color: #008080">25</span> <span style="background-color: #f5f5f5; color: #000000">                name: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">keepfool jack</span><span style="background-color: #f5f5f5; color: #000000">'</span> <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">显示</span>
<span style="color: #008080">26</span> <span style="background-color: #f5f5f5; color: #000000">            }
</span><span style="color: #008080">27</span> <span style="background-color: #f5f5f5; color: #000000">        })
</span><span style="color: #008080">28</span>     <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">29</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

4.v-show: is also a conditional rendering instruction. Unlike the v-if instruction, elements using the v-show instruction will always be rendered to HTML (but If the expression of an element using the v-if directive is false, it will not be rendered to the HTML page. Please note the difference between v-if and v-show here). It simply sets the CSS style attribute for the element.

5.? ? The differences in v-else in different Vue versions.

6.v-for

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span> 
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span> 
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="app"</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>             <span style="color: #0000ff"><</span><span style="color: #800000">table</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>                 <span style="color: #0000ff"><</span><span style="color: #800000">thead</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>                     <span style="color: #0000ff"><</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>Name<span style="color: #0000ff"></</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>
<span style="color: #008080">15</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>Age<span style="color: #0000ff"></</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>
<span style="color: #008080">16</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>Sex<span style="color: #0000ff"></</span><span style="color: #800000">th</span><span style="color: #0000ff">></span>
<span style="color: #008080">17</span>                     <span style="color: #0000ff"></</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span>
<span style="color: #008080">18</span>                 <span style="color: #0000ff"></</span><span style="color: #800000">thead</span><span style="color: #0000ff">></span>
<span style="color: #008080">19</span>                 <span style="color: #0000ff"><</span><span style="color: #800000">tbody</span><span style="color: #0000ff">></span>
<span style="color: #008080">20</span>                     <span style="color: #0000ff"><</span><span style="color: #800000">tr </span><span style="color: #ff0000">v-for</span><span style="color: #0000ff">="person in people"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000"> v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items".items是一个数组，item是当前被遍历的数组元素。 </span><span style="color: #008000">--></span>
<span style="color: #008080">21</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>{{ person.name  }}<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>
<span style="color: #008080">22</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>{{ person.age  }}<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>
<span style="color: #008080">23</span>                         <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>{{ person.sex  }}<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>
<span style="color: #008080">24</span>                     <span style="color: #0000ff"></</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span>
<span style="color: #008080">25</span>                 <span style="color: #0000ff"></</span><span style="color: #800000">tbody</span><span style="color: #0000ff">></span>
<span style="color: #008080">26</span>             <span style="color: #0000ff"></</span><span style="color: #800000">table</span><span style="color: #0000ff">></span>
<span style="color: #008080">27</span>         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">28</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">29</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="vue.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">30</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">31</span>         <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> vm </span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #0000ff">new</span><span style="background-color: #f5f5f5; color: #000000"> Vue({
</span><span style="color: #008080">32</span> <span style="background-color: #f5f5f5; color: #000000">            el: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">#app</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">33</span> <span style="background-color: #f5f5f5; color: #000000">            data: {
</span><span style="color: #008080">34</span> <span style="background-color: #f5f5f5; color: #000000">                people: [{
</span><span style="color: #008080">35</span> <span style="background-color: #f5f5f5; color: #000000">                    name: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Jack</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">36</span> <span style="background-color: #f5f5f5; color: #000000">                    age: </span><span style="background-color: #f5f5f5; color: #000000">30</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">37</span> <span style="background-color: #f5f5f5; color: #000000">                    sex: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Male</span><span style="background-color: #f5f5f5; color: #000000">'</span>
<span style="color: #008080">38</span> <span style="background-color: #f5f5f5; color: #000000">                }, {
</span><span style="color: #008080">39</span> <span style="background-color: #f5f5f5; color: #000000">                    name: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Bill</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">40</span> <span style="background-color: #f5f5f5; color: #000000">                    age: </span><span style="background-color: #f5f5f5; color: #000000">26</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">41</span> <span style="background-color: #f5f5f5; color: #000000">                    sex: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Male</span><span style="background-color: #f5f5f5; color: #000000">'</span>
<span style="color: #008080">42</span> <span style="background-color: #f5f5f5; color: #000000">                }, {
</span><span style="color: #008080">43</span> <span style="background-color: #f5f5f5; color: #000000">                    name: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Tracy</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">44</span> <span style="background-color: #f5f5f5; color: #000000">                    age: </span><span style="background-color: #f5f5f5; color: #000000">22</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">45</span> <span style="background-color: #f5f5f5; color: #000000">                    sex: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Female</span><span style="background-color: #f5f5f5; color: #000000">'</span>
<span style="color: #008080">46</span> <span style="background-color: #f5f5f5; color: #000000">                }, {
</span><span style="color: #008080">47</span> <span style="background-color: #f5f5f5; color: #000000">                    name: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Chris</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">48</span> <span style="background-color: #f5f5f5; color: #000000">                    age: </span><span style="background-color: #f5f5f5; color: #000000">36</span><span style="background-color: #f5f5f5; color: #000000">,
</span><span style="color: #008080">49</span> <span style="background-color: #f5f5f5; color: #000000">                    sex: </span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">Male</span><span style="background-color: #f5f5f5; color: #000000">'</span>
<span style="color: #008080">50</span> <span style="background-color: #f5f5f5; color: #000000">                }]
</span><span style="color: #008080">51</span> <span style="background-color: #f5f5f5; color: #000000">            }
</span><span style="color: #008080">52</span> <span style="background-color: #f5f5f5; color: #000000">        })
</span><span style="color: #008080">53</span>     <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">54</span> 
<span style="color: #008080">55</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

The above is the detailed content of Vue(1). For more information, please follow other related articles on the PHP Chinese website!