vue2.0——v-bind
2017-04-28 09:55
211 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue2.0——v-bind
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- vue2.0——v-bind
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0——v-bind
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0 v-bind的用法
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0——v-bind
- vue2.0——v-bind
- Vue2.0 新手完全填坑攻略——从环境搭建到发布
- Vue 2.0生命周期和钩子函数
- vue2.0 中#$emit,$on的使用详解