标签内绑定属性（此功能看来可以动态绑定标签属性）
<template>
<div id="app">
<div v-bind:title="title">
鼠标走一走
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
title : "鼠标喵一喵"
}
}
}
</script>
小测试绑定个图片路径来一波
<div id="app">
<div v-bind:title="title">
<h1>鼠标走一走</h1>
<img v-bind:src="imageurl"/>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
title : "鼠标喵一喵",
imageurl : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540457844377&di=51f497b9b09af6129317c9977b2cc79c&imgtype=0&src=http%3A%2F%2Fimg.ph.126.net%2F5lKdv1Apo0v4IOka67Vz5A%3D%3D%2F1392738184765824158.jpg"
}
}
}
v-bind其实可以省略
:imagesurl 也可以（了解）
如果想在script里写代码可以这么玩
<template>
<div id="app">
<div v-html="h2"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
h2:"<h2>我是一个存在于Script的H2</h2>"
}
}
}
</script>————————————————————————————————————————————
v-bind：class的使用（绑定style）
<template>
<div id="app">
<div v-html="h2"></div>
<div>
<h1 v-bind:class="{red : true}">LOOKLOOK</h1>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
h2:"<h2>我是一个存在于Script的H2</h2>"
}
}
}
</script>
<style lang="scss">
.red{
color: red;
}
</style>格式是<h1 v-bind:class="{red : true}"> ture就是给与 false就是没有
下面有个小测试，只让第一行变色
<table border="" cellspacing="" cellpadding="">
<tr v-for="(item,key) in solalist" v-bind:class="{red:0==key}">
<td>{{item}}</td>
<td>{{key}}</td>
</tr>
</table>下面来动态的设置一下div的大小
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300
}
}
}
</script>
<style lang="scss">
.red{
color: red;
}
.box{
background: deepskyblue;
}
</style>——————————————————————————————————————————————————
双向数据绑定 MVVM
MVVM :Model改变会影响视图view，view视图改变反过来影响model
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
}
}
</script>
再写个方法来测试一下
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
<button v-on:click="getMsg()">MVVM测试按钮</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getMsg(){
alert(this.msg);
}
}
}
</script>
设置model同样改变视图
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
<br />
<button v-on:click="getMsg()">获取MVVM测试按钮</button><br />
<button v-on:click="setMsg()">设置MVVM测试按钮</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getMsg(){
alert(this.msg);
},
setMsg(){
this.msg = '奋起吧，咸鱼！'
}
}
}用dom来获取表单数据（this.$refs就是获取dom节点）
<template>
<div id="app">
<input type="text" ref="inputsola"/><br />
<button v-on:click="getInputValue()">另一种获取表单数据的方法</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getInputValue(){
//获取ref定义的dom节点
alert(this.$refs.inputsola.value);
}
}
}ref就相当于指定id，我来用ref设置文本的值玩玩
<template>
<div id="app">
<h1 ref="text">暂时值为空</h1>
<input type="text" ref="inputtext"/>
<button v-on:click="setTextValue()">换换内容</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
},methods:{
setTextValue(){
var temp = this.$refs.inputtext.value;
this.$refs.text.innerText = temp;
}
}
}
</script>