Day29-Alpine.js vs Vue.js浅谈(5)

今天要比较的是「属性绑定」，
Alpine.js使用的是x-bind:属性=""，
Vue.js使用的是v-bind:属性=""，
两者皆可简化成:属性=""，
接着让我们来看范例吧。

共同css

.hidden {
  display: none;
}

Alpine.js

html

  <div x-data="{
    post: {
      title: 'My first post',
      featuredImage: 'https://dummyimage.com/600x400',
      isPublished: false
    },
    isOnMobile: true,
  }">
  
    <h3 x-text="post.title"></h3>
    
    <div>img1</div>
    <img 
    x-bind:src="post.featuredImage" 
    x-bind:alt="post.title"
    >
    <hr>
    
    <div>img2</div>
    <img x-bind:class="{ hidden: isOnMobile }">
    <hr>
    
    <button x-bind:disabled="post.isPublished">Publish</button>
  </div>

这边主要拆成3个部分，
第一，img1底下带入
x-bind:src="post.featuredImage"
x-bind:alt="post.title"
就是将x-data内所对应的质带入就会显示对应的属性了

第二，img2底下带入
x-bind:class="{ hidden: isOnMobile }"
意思是当isOnMobile条件为true时，该标签会有hidden的class，
而上面.hidden的css已经写好了，
就会直接被带入，
所以这张图就不会显示出来了。

第三，在button中带入
x-bind:disabled="post.isPublished"
意思是当post.isPublished条件为true时，该标签会有disabled的属性

Vue.js

html

<template>
  <div>
    <h3>{{ post.title }}</h3>

    <div>img1</div>
    <img
      v-bind:src="post.featuredImage"
      v-bind:alt="post.title"
    >
    <hr>
    
    <div>img2</div>
    <img v-bind:class="{ hidden: isOnMobile }">
    <hr>
    
    <button v-bind:disabled="post.isPublished">Publish</button>
  </div>
</template>

js

  export default {
    name: 'App',
    data() {
      return {
        post: {
          title: "My first post",
          featuredImage: "https://dummyimage.com/600x400",
          isPublished: false
        },
        isOnMobile: true
      }
    }
  }

大家其实可以比较一下，
条件都一样只是写的方式不一样而已，
用法几乎是一模一样，
有兴趣的可以玩看看~