Vue(1)

PHP中文网
Lepaskan: 2017-06-17 17:30:04
asal
1297 orang telah melayarinya

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>
Salin selepas log masuk

2.双向数据绑定

<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>
Salin selepas log masuk

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>
Salin selepas log masuk

4.v-show:也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML(但是使用v-if指令的元素如果表达式为假,则不会被渲染到HTML页面,这里要注意v-if和v-show的这个区别),它只是简单地为元素设置CSS的style属性。

5.??不同Vue版本中v-else的不同。

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>
Salin selepas log masuk

 

Atas ialah kandungan terperinci Vue(1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan