October 6, 2022

Robotic Notes

All technology News

Using v-bind:src with Vue – Mastering JS

1 min read


August 29, 2022

You can dynamically control the image <img> displayed using v-bind:srcor :src for short, binding. This allows you to insert JavaScript into the attribute field.

methods

Using :srcyou can set the image src to the result of a Vue method.

<script>
  const  createApp  = Vue

  createApp(
    methods: 
      getPhoto() 
        return '../../assets/logo.png';
      
    ,
    template: `
    <img :src="https://masteringjs.io/tutorials/vue/getPhoto()" />
    `
  ).mount('#app');
</script>

calculated

The calculated property allows you to have logic that depends on reactive data. In the example below you should value change, the logo image will no longer be displayed.

<div id="example"></div>

<script>
  const  createApp  = Vue

  createApp(
    data: function() 
      return 
        value: 0
      
    ,
    computed: 
        photo() 
          return this.value == 0 ? '../../assets/logo.png' : 0
        
    ,
    template: `
    <img :src="https://masteringjs.io/tutorials/vue/photo" />
    <div>
      <button @click="value > 0 ? value-- : value++">Click</button>
    </div>
    `
  ).mount('#example');
</script>

Vue School has some of our favorite Vue video courses. Their Vue.js Masterclass walks you through building a real-world app and does a great job of teaching you how to integrate Vue with Firebase. Look at this!


More Vue tutorials



Source link