属性指令
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-bind:属性名="变量"</h2>
<!-- -标签会有很多属性 <a href=""></a> <img src="" > <p name="xxx"></p> <button class="btn">点我</button>-->
<!-- -可以绑定标签的任意属性-->
<!-- -v-bind可以简写成 :属性='变量'-->
<button @click="clickEvent">click</button>
<img v-bind:src="url" alt="img">
<img :src="url" alt="img">
</div>
</body>
<script>
<!-- 创建app实例-->
const app = Vue.createApp({
data() {
return {
url: 'https://www4.bing.com//th?id=OHR.BridalVeilFalls_ZH-CN3954641670_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=240&h=135',
imgScr: ['https://www4.bing.com//th?id=OHR.BridalVeilFalls_ZH-CN3954641670_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=240&h=135', 'https://www4.bing.com//th?id=OHR.GlassOctopus_ZH-CN6853414529_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=240&h=135'],
}
}, methods: {
clickEvent() {
this.url = this.imgScr[Math.round(Math.random())]
},
}
}
)
//挂载
app.mount('#app')
</script>
</html>
class/style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.red {
color: red;
}
.bg {
background-color: yellow;
}
.fz {
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的三种绑定方式</h1>
<span v-text="str1" v-bind:class="class_obj"></span>
<br>
<span v-text="str1" :class="class_str"></span>
<br>
<span v-text="str1" :class="class_str"></span>
<h1>style的三种绑定方式</h1>
<span v-text="str1" v-bind:style="style_str"></span>
<br>
<span v-text="str1" :style="style_list"></span>
<br>
<span v-text="str1" :style="style_list2"></span>
<br>
<span v-text="str1" :style="style_obj"></span>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
str1: 'YxbHgdMu6C'.toUpperCase(),
// class:字符串，数组(常用，class由多个类组成，数组跟它最搭)，对象
class_str: 'red fz bg',
class_list: ['red', 'fz'],
class_obj: {
red: true,
bg: true,
fz: false
},
// style :字符串，数组，对象(style 来讲，它用的多)
style_str: 'color:blue;background: pink',
style_list:[{'font-size':'100px'}],
//驼峰形式
style_list2:[{fontSize:'200px'}],
style_obj:{
fontSize:'50px'
}
}
},
methods: {}
})
app.mount('#app')
</script>
</html>
本文作者：Sherwin
本文链接：https://www.cnblogs.com/sherwin1995/p/16804017.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步