Vue学习(3)————————绑定Class绑定Style,双向数据绑定，dom节点

Z时代
2024-01-10
分类：综合

vue

标签内绑定属性（此功能看来可以动态绑定标签属性）

<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>