vue学习笔记-2v-bind/v-if/v-show

 一、属性绑定

1.文本值双花括号绑定
2. v-bind:属性名   功能：绑定一个动态的值。指示Vue将元素的id attribute与组件的dynamicId属性保持一致。

语法eg：

<div v-bind:id="dynamicId" v-bind:class="dynamicClass"></div>

 语法简写eg:

<div:id="dynamicId":class="dynamicClass" ></div>

若绑定的值是null or undefined，该attribute将会从渲染的元素上移除。

3.布尔型attribute依据true/false值决定attribute是否应该存在于该元素上

<template>
  <button :disabled="isButtonDisabled">Button</button>
</template>
<script>
export default {
  data(){
    return{
      isButtonDisabled:false
    }
  }
}
</script>

4.动态绑定多个值

在template中插入，v-bind前后不加：

 <div v-bind="objectOfAttrs">test</div>

把两个数据做成一个对象

objectOfAttrs:{
        class:"appclass",
        id:"appID",
      }

二、条件渲染    

vue中提供了条件渲染·类似于JavaScript中的条件语句

1.v-if指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回值时才被渲染

<div v-if="flag">你能看见我吗</div>

false不显示值，true显示值。

return{
            flag:false,
        }

2.v-else可为v-if添加一个else区块 。若flag为false则显示”那你还是看看我吧“

 <div v-if="flag">你能看见我吗</div>
    <div v-else>那你还是看看我吧</div>

3.v-else-if提供的是相应于v-if的"else if区块"。可以连续多次重复使用

<template>
    <h3>条件渲染</h3>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else>not A/B/C</div>
</template>
<script>
export default{
    data(){
        return{           
            type:"B"
        }
    }
}

</script>

4.v-show指令可以用来按条件显示一个元素，与v-if用法相似

v-if vs v-show

v-if（1）是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建；

（2）是“惰性的”：如果在初次渲染时条件值为false,则不会做任何事。条件区块只有当条件首次变为true时才会被渲染。

v-show要简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会切换。

总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如何需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适

今日小技巧+反思

ctrl+c退出项目

文件夹命名一定要英文 且不能有空格把空格用_代替，在cmd调用时会少很多麻烦！！！！