官方文档参考
1. 动态绑定 内容
动态绑定内容可以通过
Mustache,v-text指令，v-html指令
<!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>
<!-- 模板写法一 -->
<!-- <script type="x-tempalte" id="my-app">
<h2>{{ message }}</h2>
<h2 v-text="message"></h2>
<div v-html="info"></div>
</script> -->
<!-- 模板写法二 template会被浏览器忽略 -->
<template id="my-app">
<h2>{{ message }}</h2>
<!--
{{ message }} 相当于 v-text写法。
data属性中message内容发生变化，页面展示的值也会动态调整
-->
<h2 v-text="message"></h2>
<div v-html="info"></div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: `#my-app`,
data() {
return {
message: "hello vue3",
info: `<span style="color: red;font-weight: 900;font-size: 30px;" > 嘿嘿嘿</span >`
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
</html>
2. v-bind指令动态绑定 属性
v-bind指令是开发中最常用的指令之一，而且非常强大，可以用来动态绑定
属性，class，style，对象等
<body>
<div id="app"></div>
<template id="my-app">
<!-- v-bind完整写法 -->
<img v-bind:src="src" alt="动漫图片">
<!-- 语法糖写法（使用: 简洁方便，最常用） -->
<img :src="src" alt="动漫图片">
<!-- 注意不要写丢了，找半天找不到 -->
<img src="src" alt="动漫图片未写v-bind">
<a :href="href">我是一个跳转到百度的链接</a>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
src: "https://tse3-mm.cn.bing.net/th/id/OIP.TIxW7fKu-vTbnQ2F6bIjGwHaNK?pid=ImgDet&rs=1",
href:"https://www.baidu.com"
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
绑定
自定义属性
<body>
<div id="app"></div>
<template id="my-app">
<div :[key]="value">{{ message }}</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
message: "hello VUE3",
key: "abc",
value: "def"
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
3. v-bind指令动态绑定 class
v-bind指令动态绑定
class,有两种写法。分别是：对象语法，数组语法;
<!-- v-bind绑定class对象语法 -->
<!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>
<style>
.active {
color: orangered;
font-weight: 900;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 1. 普通的绑定方式 -->
<div :class="className">{{ message }}</div>
<!-- 2. 对象方式动态切换class是否加入： {active: (boolean true/false)} -->
<div class="home" :class="{abc:true, 'james' : true}">hello VUE3</div>
<!-- 3. 切换显示隐藏 -->
<div :class="{'active': isActive}">哈哈哈</div>
<button @click="toggle">切换</button>
<!-- 4. 绑定对象 -->
<div :class="classObj">哈哈哈</div>
<!-- 5. 从methods中获取 -->
<div :class="getClassObj()">哈哈哈</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
message: "hello VUE3",
className: "active",
isActive: true,
classObj: { 'active': true, 'abc': true }
}
},
methods: {
toggle() {
this.isActive = !this.isActive
},
getClassObj() {
return { 'active': this.isActive, 'title': this.isActive }
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
</html>
<!-- v-bind绑定class数组语法 -->
<body>
<div id="app"></div>
<template id="my-app">
<!-- 1. 直接传入一个数组 -->
<div :class="['who','title']">哈哈哈</div>
<!-- 2. 数组中使用三元运算符 [变量?类名true:类名false]-->
<div :class="[isActive ? 'active': '']">呵呵呵</div>
<!-- 3. 数组中使用对象语法 -->
<div :class="['abc',{'active':isActive}]">嘿嘿嘿</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
isActive: true,
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
4. v-bind指令动态绑定 style
v-bind指令动态绑定
style同样的有两种写法。分别是：对象语法，数组语法;
<!-- v-bind 绑定style 对象语法 -->
<body>
<div id="app"></div>
<template id="my-app">
<!-- 1. 绑定一个对象 -->
<div :style="styleObj">{{ message }}</div>
<!-- 2.style绑定对象使用三元表达式 -->
<div :style="{color: title.includes('测试')?greenColor:blueColor}">{{ message }}</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
message: "hello VUE3",
styleObj: {
fontSize: '30px',
fontWeight: '900',
'font-family': '宋体',
color: 'orangered',
},
title: '测试',
greenColor: 'green',
blueColor: 'blue'
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
<!-- v-bind 绑定style 数组语法 -->
<body>
<div id="app"></div>
<template id="my-app">
<div :style="[styleObj1,styleObj2]">{{ message }}</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
message: "hello VUE3",
styleObj1: {
fontSize: '30px',
fontWeight: '900',
'font-family': '宋体',
color: 'orangered',
},
styleObj2: {
backgroundColor: 'green'
}
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
5. v-bind 绑定一个 对象
如果我们希望将一个
对象的所有属性，绑定到元素上,可以直接绑定一个对象;可以直接使用v-bind,也可以使用简写:"，但是直接绑定一个对象时，更推荐使用v-bind，便于阅读维护
<!-- v-bind 绑定一个对象 -->
<body>
<div id="app"></div>
<template id="my-app">
<div v-bind="info">{{ message }}</div>
<!-- 不推荐，不便于阅读 -->
<div :="info">{{ message }}</div>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#my-app",
data() {
return {
message: "hello VUE3",
info: {
name: "zk",
age: 23,
height: 175
}
}
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
