使用v-bind指令绑定属性

使用v-bind指令绑定属性

• 之前我们已经学习使用插值来进行数据绑定，但是这种插值并不可以在 HTML attributes 中使用，例如

const app = Vue.createApp({data() {return {courseGoal: 'IT知识一享！！！',vueLink: 'https://cn.vuejs.org/'};}
});app.mount('#user-goal');

    <section id="user-goal"><h2>My Course Goal</h2><p>{{ courseGoal }}</p><p>学习更多的关于Vue的知识<a href=" { {vueLink} } ">Vue官网</a></p></section></body>
</html>

• 我们可以看到，使用插值并不能将我们想要的链接进行解析，这时候我们可以使用v-bind ，v-bind指令指示 Vue 将元素的与组件的属性保持一致。

   <section id="user-goal"><h2>My Course Goal</h2><p>{{ courseGoal }}</p><p>学习更多的关于Vue的知识<a v-bind:href="vueLink ">Vue官网</a></p></section>

理解Vue中的methods

• 学习完data(),现在来学习methods,methods用于声明要混入到组件实例中的方法。例如，我们想要来P标签中动态的显示内容，大概就和摇骰子一样来随机输出内容

methods: {outputGoal() {const ran = Math.random();if (ran > 0.5) {return '学习Vue';} else {return '精通Vue';}}}

这说明我们插值可以直接运行一些方法，也可以在插值中运行一些表达式

 <p>{{ 1+1 }}</p>