Vue v-bind:的使用
2021-11-10 本文已影响0人
mage1160
<script src="../libs/vue.js"></script>
<div id="app">
<a v-bind:href="url">点击跳转</a>
<h2 v-bind:style="color">字体改变颜色</h2>
<h2 v-bind:class="colorClass">class改变字体颜色</h2>
<h2 class="green">红色字体</h2>
<!--语法糖 v-bind：缩写：-->
<h2 :title="message">v-bind缩写</h2>
<!--动态参数-->
<!--指令：[]=''-->
<p :[name]="value">测试动态参数</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/',
color: 'color: red',
colorClass:'red',
message:'title的内容',
name:'title',
value:'title的数据'
},
/*方法写在methods*/
methods: {}
})
</script>
<style>
.red {
color: red;
}
.green{
color: green;
}
</style>
