Analisis mendalam tentang arahan mengikat atribut dinamik Vue v-bind

Fungsi v-bind adalah serupa dengan ekspresi interpolasi, kecuali v-bind digunakan terutamanya untuk menetapkan atribut label secara dinamik. Artikel berikut akan membawa anda mengetahui lebih lanjut tentang Vuearahan pengikat atribut dinamik v-bind. Perintah

v-bind ialah perintah yang secara khusus mengendalikan atribut Jadi apakah itu atribut? Sebagai contoh, kami sering menetapkan imej menjadi src, teks atas tetikus menjadi title dan kelas class, dsb. Ini adalah atribut.

1 Pengenalan dan penggunaan asas arahan v-bind

1), fungsi: secara dinamik mengikat atribut <.>

Selain kandungan yang perlu dilaksanakan secara dinamik, kadangkala kita juga mahu dapat menukar atribut elemen secara dinamik

Sebagai contoh, kita boleh mengikat atribut href secara dinamik unsur a, src sifat img dan sebagainya.

2) Perbandingan dengan operasi interpolasi:

Fungsi utama operasi interpolasi adalah untuk memasukkan data dalam contoh Vue ke dalam templat Menukar data dalam tin data Tukar kandungan yang dipaparkan secara dinamik. Banyak kali nilai atribut kami juga perlu diubah Sebagai contoh, src mungkin diminta daripada pelayan, meletakkan nilai ke dalam data contoh vue, dan kemudian menetapkan atribut dalam data kepada atribut dalam templat. Kami hanya perlu mengubahnya Nilai dalam data boleh dijawab dalam masa nyata. (Belajar perkongsian video:

tutorial video vue)

3), kaedah penulisan: Tambah di hadapan atribut (gula sintaksis: tambah terus di hadapan daripada atribut v-bind:):

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

Contoh

<div>
        <!-- 错误的做法：这里不能使用mustache语法，mustache语法是在内容中显示 -->
        <img  alt="Analisis mendalam tentang arahan mengikat atribut dinamik Vue v-bind" > // 直接报错，会被当成字符而不是变量
        
        <!-- 正确的做法，使用v-bind指令 -->
        <img  alt="Analisis mendalam tentang arahan mengikat atribut dinamik Vue v-bind" >  // 加了v-bind:后vue会对它进行解析，把它的属性值当成变量
        <a>百度一下</a>
        
        <!-- 语法糖的写法 -->
        <img  alt="Analisis mendalam tentang arahan mengikat atribut dinamik Vue v-bind" >
        <a>百度一下</a>
        
    </div>
    <script></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: &#39;你好啊！&#39;,
                // 从服务器请求过来的数据
                imgURL: &#39;https://img-home.csdnimg.cn/images/20210716103807.jpg&#39;,
                aHref: &#39;http://www.baidu.com&#39;
            }
        })
    </script>

2 (Sintaks objek)

1), fungsi:

Selepas mengikat atribut kelas secara dinamik, nilai kelas ialah pembolehubah, yang boleh diletakkan dalam gaya pengikatan Dinamik dalam data

2), penggunaan:

v-bind:class= "{key1：value1，key2：value2}"

• Jika nilai kandungan objek adalah benar, maka gaya kekunci Ia berfungsi

• Jika nilai kandungan objek palsu, gaya kunci tidak berfungsi

Nilai diletakkan dalam data sebagai pembolehubah. Gunakannya, jadikan ia benar apabila digunakan, palsu apabila tidak digunakan,

Dengan cara ini, nilai kelas atribut boleh diubah suai secara dinamik

  //样式
 <style>
    .active{
      color: red;
     }
 </style>
--------------------------------------
<div>
  <h2>{{message}}</h2>
  //第一种：直接用style中的样式，固定写死；
  
  <h2>{{message}}</h2>
  //第二种：用指令v-bind,class的属性值active为变量；
  //vue解析，变量对应data中active属性值，则用了active的样式；
  
  <h2>{{message}}</h2>
  //第三种：用指令v-bind；后面接对象{key1：value1，key2：value2}
  //isActive为true则active样式起作用。
  //isActive为false则active样式不起作用。

  <button>按钮</button>
  //设置按钮，让点击按钮，颜色变化

  <h2>{{message}}</h2>
  //用固定写的class值为title和动态添加的class结合，它们不会覆盖

  <h2>{{message}}</h2>
  //class中的对象比较复杂，则直接放在一个methods中,然后调用这个函数
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      active:"active",
      isActive:true,
      isLine:true
    },
    methods:{
      btn:function () {
        this.isActive=!this.isActive
      },
      //执行该函数，让isActive变为相反的值，若true变为false，若false变为true；
      //isActive的取值决定class是否用该变量，是否用对应的样式；
      getClasses:function () {
        return  {active:this.isActive, line:this.isLine}
      }
      //返回，作为class的值
    }
  })
</script>

3. v-bind secara dinamik mengikat atribut kelas (sintaks tatasusunan)

Gunakan arahan v-bind diikuti dengan tatasusunan,

, maka nilai kelas Ia adalah kandungan dalam tatasusunan, dan boleh berbilang [key1,key2…]

Sintaks tatasusunan biasanya tidak banyak digunakan, kerana ia juga berkod keras, anda boleh terus menggunakan kaedah asal

<div>
	<h2>{{message}}</h2> 
	<h2>{{message}}</h2> 
	// 上面两种的效果都是一样的
	
	<h2>{{message}}</h2> 
	// 将数组放在方法中，然后调用该方法
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊！&#39;,
            active: &#39;aaa&#39;,
            line: &#39;bbb&#39;
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

4. v-bind secara dinamik mengikat atribut gaya sebaris (sintaks objek)

1), Senario aplikasi:

Semasa pembangunan komponen, blok tertentu (seperti bar navigasi) mungkin dikapsulkan apabila menggunakan blok ini di tempat yang berbeza, anda mungkin mahu memaparkan gaya yang berbeza. Anda boleh menggunakan gaya atribut pengikat dinamik v -bind

2), formatnya ialah:

<h2 v-bind:style="{">{{message}}</h2>

Apabila nilai gaya berada dalam petikan, vue Apabila menghuraikan, ia akan dianggap sebagai nilai tetap

<h2 v-bind:style="{">{{message}}</h2>

Apabila nilai gaya tidak disertakan dalam petikan berganda , ia akan dianggap sebagai pembolehubah. Vue akan menghuraikannya menjadi pembolehubah, dan nilai pembolehubah akan menjadi Cari

<div>
	<!-- 如下：finalSize当成一个固定值来使用 -->
	<h2>{{message}}</h2> 
	
	<!-- 如下：finalSize当成一个变量来使用,通过data动态绑定 -->
	<h2>{{message}}</h2>
	
	<!-- 如下：属性过多时，可以放在方法中-->
	<h2>{{message}}</h2>
</div>
<script></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: &#39;你好啊！&#39;,
        finalSize: 100,
        finalColor: &#39;red&#39;
    },
    methods: {
        getStyles: function () {
            return { fontSize: this.finalSize + &#39;px&#39;, backgroundColor: this.finalColor }
        }
    }
})
</script>

5. v-bind secara dinamik mengikat atribut gaya sebaris (sintaks tatasusunan)

Format sintaks tatasusunan ialah:

<h2 v-bind:style="[base,base2]">{{message}}</h2>

Ia juga tidak biasa digunakan

<div>
	<h2>{{message}}</h2>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊！&#39;,
            baseStyle: { backgroundColor: &#39;red&#39; },
            baseStyle1: { fontSize: &#39;100px&#39; },
        }
    })
</script>

Nota:

1. Elakkan menggunakan huruf besar apabila menggunakan parameter dinamik, kerana penyemak imbas akan memaksa nama atribut elemen ditukar kepada huruf kecil

<div id="app">
      <a v-bind:[Attribute] = "url">动态参数</a>
</div>
<script src="../../plugings/vue.js"></script>
<script>
        var vm = new Vue({
                el: "#app",
                data: {
                    Attribute: "href",
                    url: "http://www.baidu.com"
                }
        })
</script>

Mesej ralat yang berkaitan ialah:

2. Parameter dinamik tidak boleh mengandungi tanda petikan dan ruang

Apabila tanda petikan disertakan, ralat merah yang berkaitan akan dilaporkan:

Apabila terdapat ruang, ralat yang dilaporkan pada bahagian penyemak imbas adalah seperti berikut:

(Perkongsian video pembelajaran: pembangunan bahagian hadapan web , Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Analisis mendalam tentang arahan mengikat atribut dinamik Vue v-bind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!