一、属性绑定和v-model的原理

v-bind: 可以绑定属性 例如 value属性 class属性 style属性等

也可以直接简写成 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>开发者工具网(kinggm520.gitee.io/java)</title>
<style type="text/css">
        [v-cloak] {
display: none;
        }
</style>
</head>

<body>
<div id="app">
<!--    v-model 数据双向绑定的原理   属性绑定 + 事件绑定-->
<!--    v-bind绑定value属性   v-on绑定input事件 当input框发生输入动作时会触发input事件 在相应的方法里将最新的input值赋值给 value属性-->
<input v-bind:value="msg" v-on:input="dealInput">
    {{msg}}

</div>
</body>
</html>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
        {
el: '#app',  // el 属性值 要和上面html中id的值相同（多个#）
data: {      // data 属性 值是个js对象  里面用来存放需要用到的数据
msg:''
            },
methods: {   // 方法  也是一个js对象 里面可以定义多个方法逗号隔开
dealInput(event){
this.msg = event.target.value;
                }
            }

        }
    );

</script>


还可以简写成这样

    <input v-bind:value="msg" v-on:input="msg=$event.target.value">

二、Vue 属性绑定、v-model的原理、绑定class、绑定style_前端

二、绑定class、绑定style 通过操作数据改变样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>开发者工具网(kinggm520.gitee.io/java)</title>
<style type="text/css">

.base{
width: 100px;
height: 100px;
background: aqua;
        }
.circle{
width: 100px;
height: 100px;
border-radius: 50px;
background: red;
        }


</style>
</head>

<body>
<div id="app">
<div class="base" v-bind:class="{circle:isActive}" ></div>
<!--    对象语法-->
<button @click="active">改变样式</button>

<!--使用多个class样式 可以逗号隔开-->
<div class="base" v-bind:class="{circle:true,base:true}" ></div>

<!--   数组语法-->
<div class="base" v-bind:class="[1===1? circle :'']" >123</div>
<div class="base" v-bind:class="['circle','base']" >123</div>

<!--    数组加对象的混合语法-->
<div class="base" v-bind:class="['base',{circle:true}]" >123</div>


</div>
</body>
</html>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
        {
el: '#app',  // el 属性值 要和上面html中id的值相同（多个#）
data: {      // data 属性 值是个js对象  里面用来存放需要用到的数据
msg:'',
isActive:false,
circle:'circle'
            },
methods: {   // 方法  也是一个js对象 里面可以定义多个方法逗号隔开

active(){
this.isActive = !this.isActive;
                }

            }

        }
    );

</script>

二、Vue 属性绑定、v-model的原理、绑定class、绑定style_开发语言_02

  • 绑定style也有两种语法形式
  • 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>开发者工具网(kinggm520.gitee.io/java)</title>
<style type="text/css">

</style>
</head>

<body>
<div id="app">

<!--    注意属性名称不是字符串    属性值是字符串-->
<div v-bind:style="{color:'white',width:'100px',height:'100px',background:'red'}">123</div>

<!--    也可以直接绑定一个对象 这样看起来更清晰-->
<div v-bind:style="styleData">123</div>

<!--    数组语法-->
<div v-bind:style="[styleData,styleData2]">123</div>

</div>
</body>
</html>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
        {
el: '#app',  // el 属性值 要和上面html中id的值相同（多个#）
data: {      // data 属性 值是个js对象  里面用来存放需要用到的数据
styleData:{
color:'white',
width:'100px',
height:'100px',
background:'red'
                },
styleData2:{
color:'white',
width:'100px',
height:'100px',
background:'black'
                }
            },
methods: {   // 方法  也是一个js对象 里面可以定义多个方法逗号隔开


            }

        }
    );

</script>

二、Vue 属性绑定、v-model的原理、绑定class、绑定style_数组_03