Vue(1)
- PHP中文网原创
- 2017-06-17 17:30:041202浏览
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.双向数据绑定
<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：也是条件渲染指令，和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>
以上是Vue(1)的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js中下划线动画实例代码下一篇：JS判断浏览器类型及版本实例详解