V-bind sets elements’ attributes (e.g., SRC,title,class)

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt=""><br>
        <! String concatenation with exclamation point "!" , plus ternary expressions and click events -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!! '"
             :class="isActive? 'active':''" @click="toggleActive"><br>
<! -- <img :src="imgSrc" alt="" :title="imgTitle+'!!! '" -- >
<! -- :class="{active: isActive}" @click="toggleActive">-->        
    </div>

    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app'.data: {
            imgSrc: "http://xdr630.com/logo.gif".imgTitle: "I look beautiful.".isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
Copy the code
  • When you hover over the second image, you will be prompted for the title setting

  • When the second image is clicked, a red border effect is added

  • The ternary expression used in the second picture above can also be replaced by the following, which is more convenient, the effect is the same, similar to the object writing
<img :src="imgSrc" alt="" :title="imgTitle+'!!! '"
     :class="{active: isActive}" @click="toggleActive">
Copy the code