vue2.0——v-bind
来源：互联网 发布：服务器托管数据安全 编辑：程序博客网 时间：2024/05/29 02:34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-bind 重要 指令 07</title>
<script src="../assets/js/vue.js"></script>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
<style>
.classA{color:red;}
.classB{font-size:30px;}
</style>
</head>
<body>
<h1>v-bind 绑定 v-bind的简写是: v-on绑定的是事件 简写是@ v-bind绑定是属性 简写是冒号</h1>
<hr />
<div id="app">
<img v-bind:src="imageSrc" :width="width"/>意思是我对这个属性动态的绑定值了
<hr />
<div :class="className">1、绑定class</div>
<div :class="{classA:colorOr}">2、绑定class中的判断</div>
<div :class="[classA,classB]">3、绑定class中使用数组</div>
<div :class="[colorOr?classA:classB]">4、绑定class中使用三元表达式</div>
<div :class="[{classA:colorOr},classB]">5、绑定class中使用判断组合 （工作用的多）</div>
<hr />
<div :style="{color:red,fontSize:font}">6、style绑定 key必须是css里面的样式 值要一定是data里面的数据</div>
<div :style="fontArray">4、style绑定json语句</div>
</div>
<script>
var vm = new Vue({ //建立一个构造器
el:"#app", //构造器的作用域在哪里
data:{
imageSrc:"../assets/img/1.png",
width:'500',
className:"classA",
colorOr:true,
classA:"classA",
classB:"classB",
red:'blue',
font:'30px',
fontArray:{
color:'green',
fontSize:'26px'
}
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-bind 重要 指令 07</title>
<script src="../assets/js/vue.js"></script>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
<style>
.classA{color:red;}
.classB{font-size:30px;}
</style>
</head>
<body>
<h1>v-bind 绑定 v-bind的简写是: v-on绑定的是事件 简写是@ v-bind绑定是属性 简写是冒号</h1>
<hr />
<div id="app">
<img v-bind:src="imageSrc" :width="width"/>意思是我对这个属性动态的绑定值了
<hr />
<div :class="className">1、绑定class</div>
<div :class="{classA:colorOr}">2、绑定class中的判断</div>
<div :class="[classA,classB]">3、绑定class中使用数组</div>
<div :class="[colorOr?classA:classB]">4、绑定class中使用三元表达式</div>
<div :class="[{classA:colorOr},classB]">5、绑定class中使用判断组合 （工作用的多）</div>
<hr />
<div :style="{color:red,fontSize:font}">6、style绑定 key必须是css里面的样式 值要一定是data里面的数据</div>
<div :style="fontArray">4、style绑定json语句</div>
</div>
<script>
var vm = new Vue({ //建立一个构造器
el:"#app", //构造器的作用域在哪里
data:{
imageSrc:"../assets/img/1.png",
width:'500',
className:"classA",
colorOr:true,
classA:"classA",
classB:"classB",
red:'blue',
font:'30px',
fontArray:{
color:'green',
fontSize:'26px'
}
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>
0 0
- vue2.0——v-bind
- vue2.0 v-bind的用法
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- vue2.0——v-model指令
- Vue2 指令v-bind v-pre v-cloak v-once
- v-text里用过滤器失效，原因是在vue2.0里 管道符‘|’只能用在mousetache和v-bind中。
- v-bind
- v-bind
- v-bind
- vue2.0——生命周期
- vue2.0——循环
- vue2.0——组件
- vue2.0——运动
- vue2.0——路由
- Vue2.0 v-for filter列表过滤功能
- v-bind和v-on
- vue2.0——管理组件通信
- vue2.0—— Vue.directive
- 特征离散化，特征交叉，连续特征离散化
- gdb 调试
- 嵌入式Linux下3G USB Modem的使用
- 题目1478：三角形的边
- Swift3.0和OC桥接方法
- vue2.0——v-bind
- Retrofit+okhttp3的简单封装实现网络请求和拦截
- webstorm修改文件，webpack-dev-server不会自动编译刷新
- 区间K大数
- word入门操作
- 企业实施ERP的先后步骤，你真的了解吗？
- Android-LayoutInflater中inflate方法两个参数和三个参数的区别
- 功能总结之车载方案AutoPlay功能总结
- iOS更改app的icons
