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. Liaison de données bidirectionnelle
<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-si
<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： est également une directive de rendu conditionnel Contrairement à la directive v-if, les éléments utilisant la directive v-show seront toujours rendus au format HTML (mais si l'expression d'un élément utilisant la directive v-if est). false, il ne sera pas rendu sur la page HTML (notez la différence entre v-if et v-show ici), il définit simplement l'attribut de style CSS pour l'élément.
5.? ? Les différences de v-else dans les différentes versions de Vue.
6.v-pour
<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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils de test de logiciels
Introduction aux outils de développement logiciel
Comment distinguer si deux adresses sont sur le même site ?
Comment acheter du Ripple en Chine
expression régulière Perl
Quel est le code espace en HTML
Le langage C est-il identique au C++ ?
Comment modifier le fichier hosts
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
