div设置高度 vue_（三）vue常用指令，数据绑定

1、v-text和v-html

v-XXX可以直接使用vue中的参数，text显示文本格式，html可以识别html标签

<div id="app">
    <div>
         <div v-text='bbb'></div>
         <div v-html='bbb'></div>
    </div>
</div>
 
 <script> 
     new Vue({
         el:'#app',
         data:{
             bbb:"<h2>我是bbb</h2>"
         }
     })
 </script>

显示结果：

2、v-show

在div中增加v-show标签，设置v-show=false，隐藏div

<div v-show='aaa' v-html='bbb'></div>

//vue中data增加aaa
data:{
    bbb:"<h2>我是bbb</h2>",
    aaa:false
}

显示结果：

看一下html元素，发现写了v-show=false的div，实际是设置了display=none的属性，不显示div

3、v-if、v-else-if和v-else

标签根据返回布尔值为true时，显示相应div

<div id="app">
    <div>
         <div v-if='aaa==3'>{{ aaa }}=3</div>
         <div v-else-if="aaa<3">{{ aaa }}<3</div>
         <div v-else-if="aaa>3">{{ aaa }}>3</div></3>
    </div>
</div>
 
<script> 
    new Vue({
        el:'#app',
        data:{
             aaa:6
            }
        })
</script>

显示结果：布尔值为false的div，不在html标签中，说明未满足条件时不生成标签，并非改变dispaly隐藏

4、v-for

vue中定义参数aaa数组，可以使用v-for标签，数组中每个对象定义为a，循环输出a，

<div id="app">
    <div>
    <div v-for='a in aaa'>这是{{ a }}<br/></div>
    </div>
</div>
 
<script> 
    new Vue({
        el:'#app',
        data:{
        aaa:[1,2,3,4,5]
            }
        })
</script>

显示结果：

5、数据绑定单向与双向，v-bind 和v-model

v-bind单向绑定只能内存改变页面，可以简写为 ：value ：class等

v-model双向绑定是内存或页面改变都可以影响对方

看一个简单例子：

<div id="app">
    <div>
            单向绑定：<input type="text" v-bind:value='msg'/><br/>
            双向绑定：<input type="text" v-model='msg'/><br/>
            输入内容：{{ msg }}
    </div>
 </div>
 
 <script> 
      new Vue({
      el:'#app',
      data:{
           msg:'123'
            }
        })
 </script>

运行页面：

测试：

在单向绑定中输入456，发现并未改变msg参数，因此也没有改变页面上绑定msg参数的控件显示

在双向绑定中输入789，由于改变了内存中msg参数的值，因此页面上绑定msg参数的数据也调整了

6、事件绑定

使用v-on:click 可以简写为@click

增加一个button并绑定事件change，并在vue中添加方法change

<button @click='change'>把msg值改为“我变了”</button>

methods:{
    change(){
        this.msg='我变了'
        }
    }

运行页面：

点击按钮

下一讲说一下过滤器和监听。