vue学习笔记-2

发布时间:2024年01月18日

?一、属性绑定

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调用时会少很多麻烦!!!!

文章来源:https://blog.csdn.net/nicooooooooooooo/article/details/135610565
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。