Vue v-bind的使用
Vue bind 使用
2023-09-27 14:24:30 时间
1.src
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
url:'../img/1.png',
w100:'100px',
title:"这是图片"
}
});
}
</script>
</head>
<body>
<div id="box">
<img v-bind:src="url" v-bind:width="w100" v-bind:title="title">
<img :src="url" :width="w100" :title="title">
</div>
</body>
</html>
2.class []
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.font-red {
color: red;
}
.bgcolor-burlywood {
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var vm = new Vue({
el: '#box',
data: {
red: 'font-red',
burlywood: 'bgcolor-burlywood'
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="[red,burlywood]">文字颜色</p>
</div>
</body>
</html>
这里数组中的数据是data中的变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="{fontRed:true,bgBurlywood:true}">文字颜色</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
r:true,
b:true
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="{fontRed:r,bgBurlywood:b}">文字颜色</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
json:{
fontRed:true,
bgBurlywood:false
}
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="json">文字颜色</p>
</div>
</body>
</html>
方法论:熟练使用其中的常用几种,就可以了!可以进行单元测试!
相关文章
- idea使用Vue的v-bind,v-on报错
- 学好vue靠他就行了——VUEX
- vue.js:使用v-bind通过JSON绑定多个class案例
- vue.js:使用v-bind通过数组绑定多个class案例
- vue.js:使用v-bind为元素绑定单个class案例
- vue.js:组件中的data为什么必须是一个函数
- vue常用的命令
- 【经典面试题】delete和Vue.delete的区别
- Vue v-if v-for v-bind v-on
- vue绑定内联样式
- Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
- Vue基础之v-cloak、v-text、v-html、v-bind、v-on的基本使用(1)
- vue点击列表变亮(v-for和v-bind的结合)
- vue学习(十四)Vue.js中scoped引发的CSS作用域探讨
- Vue组件通信之Bus
- 【Vue 开发实战】基础篇 # 8:如何触发组件的更新
- 利用webpack4搭建vue服务器端渲染SSR
- Vue.js Mixins 混入使用
- Ant-design-vue—— 表单输入框输入很卡问题
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航