Vue 指令 -- 1

Vue 指令 – 1

• 新建一个 html 文件，在body里面加入一个 id = “ app ” 的 div 。
• 引入 vue.js 文件 ，并 new 一个 Vue实例，如下：

   <script src="lib/vue.js"></script>
      <script>
          new Vue({
              el: '#app',
              data:{
              }
          })
      </script>

• 数据展示：
  1. {{ }}
  2. v-html
  3. v-text

首先在data里面，加入 msg：‘ hello ’，在div里面添加标签

 <h2>数据展示</h2>
 <p>{{msg}}</p>
 <p v-html="msg"></p>
 <p v-text="msg"></p>

页面显示如下：

• 条件渲染：
  1. 单路分支 v-if
  2. 双路分支 v-if v-else
  3. 多路分支 v-if v-else-if … v-else 结合 type

首先在 data 里面添加 flag：true，type：’ A ’ ，在 div 里面添加下面代码

<h2> 条件渲染(v-if) </h2>
 <p v-if="flag">单路分支</p>

 <h2>条件渲染(v-if...v-else) </h2>
 <p v-if="flag">双分支-1</p>
 <p v-else>双分支-2</p>

 <h2>条件渲染(v-if...v-else-if...v-else)</h2>
 <p v-if="type === 'A'">多分支-1</p>
<p v-else-if="type==='B'">多分支-2</p>
<p v-else>多分支-3</p>

页面显示如下

• 列表渲染 （ v-for） 之 数组
  首先在 data 里面添加 lists: [‘余一’, ‘贾二’, ‘张三’, ‘赵四’, ‘王五’, ‘李六’, ‘陈七’, ‘孙八’, ‘钱九’] ，
  再在 div 里面添加下面代码

<h2>列表渲染(for) - 数组</h2>
 <ul>
           <li v-for=" (value,index) in lists ">
                    {{index+1}} : {{value}}
          </li>
 </ul>

页面显示如下：

• 列表渲染 （ v-for） 之 对象
  首先在 data 里面添加 obj1: { id: 1, name: ‘余一’,age: 25 },obj2: { id: 2, name: ‘贾二’,age: 25 },
  再在 div 里面添加下面代码：

			<h2>列表渲染(for) - 对象</h2>
            <ul>
                <li v-for=" (value,key,index) in obj1 ">
                    {{ index+1}} : {{ key }} -- {{ value }}
                </li>
            </ul>
            <ul>
                <li v-for=" (value,key,index) in obj2">
                    {{ index+1}} : {{ key }} -- {{ value }}
                </li>
            </ul>

页面显示如下：

• 列表渲染 （ v-for） 之 json
  首先在 data 里面添加 json: [{kw: ‘草莓味’,sp: ‘冰激凌’},{kw: ‘西瓜味’,sp: ‘冰激凌’},{kw: ‘荔枝味’,sp: ‘冰激凌’ }]}, 再在 div 里面添加下面代码：

           <h2>列表渲染(for) - json</h2>
            <ul>
                <li v-for=" (value,index) in json ">
                    <p>美味{{ index+1 }}：{{ value.kw}}{{ value.sp }} </p>
                </li>
            </ul>

页面显示如下：

• 列表渲染 （ v-for） 之 特殊数据：
  直接在 div 里面添加下面代码：

            <h2>列表渲染(for) - 特殊数据</h2>
            <ul>
                <li v-for=" i in 5 ">
                    {{i}}
                </li>
            </ul>

页面显示如下：

• 列表渲染 （ v-for） 之 嵌套：
  首先在 data 里面添加 banners: [{id: 1,name: ‘banner1’, child: [ {id: 1,name: ‘banner1 - 1’}]},{id: 2, name: ‘banner2’, child: [ { id: 2,name: ‘banner2 - 2’ }]}, { id: 3, name: ‘banner3’,child: [{id: 3, name: ‘banner3 - 3’} ] }], 再在 div 里面添加下面代码：

            <h2>列表渲染(for) - 嵌套</h2>
            <ul>
                <li v-for=" i in banners">
                    <p> {{i.name}}</p>
                    <ul>
                        <li v-for=" val in i.child">
                            {{val.name}}
                        </li>
                    </ul>
                </li>
            </ul>

页面如下显示：

• 数据展示：
  首先在 data 里面添加 flag2：true, 再在 div 里面添加下面代码：

            <h3> 条件展示(v-show) </h3>
            <p v-show="flag2"> 我是条件展示v-show </p>

页面显示如下：