Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Vue(1)

PHP中文网
Release： 2017-06-17 17:30:04
Original
1241 people have browsed it

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>
Copy after login

2. Two-way data binding

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

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>
Copy after login

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

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

6.v-for

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

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

source：php.cn
Previous article：Example code of underline animation in js Next article：JS Detailed Example of Determining Browser Type and Version
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
2024
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2188
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1843
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1734
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1757
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template