v-model
v-model指令，理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
修饰符
.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
</head>
<body>
<div id="app">
<p>文本信息：{{message}}</p>
<p>v-model:<input type="text" v-model='message'></p>
<p>多选按钮绑定一个值</p>
<div>
<input type="checkbox" id="ischeck" v-model='isTrue'>
<label for="ischeck">{{isTrue}}</label>
</div>
<p>多选按钮绑定一个数组</p>
<div>
<input type="checkbox" id="jiangsu" value="nanjing" v-model='city'>
<label for="jiangsu">jiangsu</label>
<input type="checkbox" id="zhejiang" value="hangzhou" v-model='city'>
<label for="zhejiang">zhejiang</label>
<input type="checkbox" id="shandong" value='jinan' v-model='city'>
<label for="shandong">shandong</label>
<p>{{city}}</p>
</div>
<p>单选按钮绑定数据</p>
<div>
<input type="radio" id="man" value='男' v-model='sex'>
<label for='man'>男</label>
<input type="radio" id='women' value='女' v-model='sex'>
<label for='women'>女</label><br>
<p>性别:{{sex}}</p>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
message:'Hello World!',
isTrue:true,
city:[],
sex:'男'
}
})
</script>
</body>
</html>
image.png
v-bind
v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
<!DOCTYPE html>
<html>
<head>
<title>v-bind</title>
<style type="text/css">
.classColor{color:red;}
.classFontSize{font-size:30px;}
.classBg{background: orange;}
</style>
</head>
<body>
<div id="app2">
<img v-bind:src='imgSrc'>
<!-- v-bind:src缩写为 :src -->
<p :class='classN1'>直接绑定class样式</p>
<!-- 绑定classFontSize并进行判断，在isClass为true时显示样式，在isClass为false时不显示样式 -->
<p :class='{classFontSize:isClass}'>绑定判断</p>
<!-- 绑定class中的数组 -->
<p :class='[classA,classB]'>绑定class中的数组</p>
<!-- 绑定class中使用三元表达式判断 -->
<p :class="isClass ? classB : classA">绑定class中使用三元表达式判断</p>
<!-- 绑定style -->
<p :style="{color:textColor,fontWeight:fontW}">绑定style</p>
<!-- 用对象绑定style样式 -->
<p :style="styleObject">用对象绑定style样式</p>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var app2=new Vue({
el:'#app2',
data:{
imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531733388997&di=6e3fab7d3c37994bac9a7cf5176ece6a&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F160223%2F14-1602230916130-L.jpg',
classN1:'classColor',
isClass:true,
classA:'classFontSize',
classB:'classBg',
textColor:'blue',
fontW:'bold',
styleObject:{
fontSize:'20px',
color:'green'
}
}
})
</script>
</body>
</html>
image.png
网友评论