vue3 动态绑定属性
2021-05-18 本文已影响0人
小话001
动态绑定属性
一般情况下，我们绑定的src、href、class、style，属性名称都是固定的；
但是在某些特殊情况下，我们属性名称也可以不固定，使用 :[属性名]=“值” 的格式来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div v-bind="info">哈哈哈哈</div>
<!-- 不推荐下面这种写法，虽然也行 -->
<div :="info">哈哈哈哈</div>
<!-- 不推荐上面这种写法，虽然也行 -->
<!-- 错误写法 -->
<div :class="info"></div>
<!-- 得到的效果 -->
<div class="name age height">测试</div>
<!-- 而实际上我想要得到的效果是 -->
<div name="why" age="18" height="1.88"></div>
</template>
<!-- <script src="../dist/vue.global.js"></script> -->
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {
name: "why",
age: 18,
height: 1.88
}
}
}
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
