属性绑定

何为属性?

属性指的是Html元素的属性,例如a标签的title就是一个属性!

Vue如何绑定属性?

Vue绑定属性一般是通过v-bind指令来执行,指令不同于{{ message }}双大括号的模板语法,它只能渲染Html内容,不能渲染Html标签的属性,这就是v-bind指令存在的意义!

  • 语法:
v-bind:class="classProperty"

// 简写
:class="classProperty"

当使用v-bind指令绑定html元素的属性后,属性(class)就相当于参数,classProperty为预期值,一般在实际应用中,v-bind绑定的属性值都是通过计算得来 或者 是一个通过判断时刻变化的值

  • 例子:
<div id="app">
    <p :title="testTitle1Key + ' - ' + testTitle1Key">testTitle</p>
    <p :title="testTitle3Key - testTitle4Key">testTitle2</p>
    <p :title="testObj">testObj</p>
    <p :title="testArr">testArr</p>
    <p :title="testMethod()">testMethod</p>
</div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          testTitle1Key: 'testTitle1Value',
          testTitle2Key: 'testTitle2Value',
          testTitle3Key: 3,
          testTitle4Key: 2,
          testObj: {
            name: 'testObj'
          },
          testArr: ['1', '2', '3'],
          testMethod: function () {
            var result = 1 + 1;
            return '1 + 1 = ' + result;
          }
        }
      });
    </script>

以上从testTitle1testTitle4,声明了4个参数:

  • 12为两个字符串类型,渲染出字符串!
  • 34为数字类型,渲染出数字!
  • testObj 为一个 Object对象,渲染出toString()方法的返回值!
  • testArr 为一个 Array(数组),渲染出toString()方法的返回值!
  • testMethod 为一个方法,渲染出方法的返回值!

然后分别通过v-bind指令绑定到了P标签的title属性,进行渲染!

  • 执行结果如下:
<div id="app">
    <p title="testTitle1Value - testTitle1Value">testTitle</p> 
    <p title="1">testTitle2</p> 
    <p title="[object Object]">testObj</p> 
    <p title="1,2,3">testArr</p> 
    <p title="1 + 1 = 2">testMethod</p>
</div>

注意观察以上绑定的testObj对象打印出来的为[object Object],此时就有些懵逼了,貌似打印出来的是Object对象的toString()方法打印的值!

  • 验证一下, 新增以下代码:
var testObj = {
	name: 'testObj'
    };

testObj.toString = function () {
	return 'name: ' + testObj.name;
    }
    
var app = new Vue({
	el: '#app',
	data: {
		...
		testObj: testObj,
		...
        }
    });

如上面所示,重写了 testObj 的 toString 方法,再来看一下页面的结果: 

可以发现,绑定 title 属性已经被修改为 toString 方法的 return 值了。

testArr与之类似也是打印的toString()方法的返回值!

由此可以看出v-bind支持单一JavaScript表达式的,并且支持直接绑定Object对象和方法。如果绑定为 Object 对象的话,那么会绑定对象的 toString() 方法的返回值。如果绑定为方法的话,那么会绑定方法的返回值。

Class 与 Style 绑定

v-bind在绑定class和style内联样式属性时,除了支持字符串之外,还可以直接使用对象或数组。 这是因为,操作元素的 class 列表和内联样式是数据绑定是一个常见需求。所以,Vue.js对这一块 做了专门的增强。

绑定Class属性

  1. 直接传入对象的语法
<div v-bind:class="{ active: isActive }"></div>

例子:

<div id="app">
	<p class="test" v-bind:class="{'red': isActive}">test</p>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: { 
      isActive: true 
    }
})
</script>

通过在控制台 app.isActive的值来控制显示!

  1. 直接放入key-vlaue形式的对象
  • 直接复用以上的例子,新添加数据:
<p class="test" v-bind:class="testClassObject">test</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        testClassObject: {
          blue: true,
          'big-font': true
	},
}
})
</script>

 

  1. 支持拼接数组
<!-- 支持拼接数组 -->
<p class="test" :class="[classBlue, bigFont]">test3</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        bigFont: 'big-font',
        classBlue: 'blue',
        }
})
</script>

4. 支持使用正则表达式

<!-- 支持使用正则表达式 -->
<p class="test" :class="[isBlue ? classBlue : classYellow]">test4</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        classBlue: 'blue',
        isBlue: false,
        classYellow: 'yellow',
        }
})
</script>

 

  1. 支持在数组中嵌套对象
<!-- 支持在数组中嵌套对象 -->
<p class="test" :class="[{classBlue : isBlue}, testClassObject]">test5</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        classBlue: 'blue',
        isBlue: false,
        classYellow: 'yellow',
        }
})
</script>

 

绑定内联style属性

  1. 使用v-bind绑定style同样支持正则表达式的形式,在格式上可以不使用中括号[]
<p style="font-weight: bold" :style="isActive ? 'color: red' : 'color: blue'">test6</p>

例子解析: 如果isActive的值为true,p元素的color为red,否则color为blue。

  1. 支持对象形式和字符串拼接
  • 不使用单引号的话需要使用驼峰标示的形式
  • 使用单引号需要使用短横线分隔的形式
<p style="font-weight: bold" :style="{color: styleRedColor, fontSize: styleFontSize + 'px', 'font-weight': styleFontLighter}">test7</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        styleRedColor: 'red',
        styleFontSize: 18,
        styleFontLighter: 'lighter',
        }
})
</script>

 

  1. 支持直接放入对象,并且Vue支持自动添加css前缀

如:-webkit-、-moz-等

<p style="font-weight: bold" :style="testStyle">test8</p>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ...
        testStyle: {
            color: 'red',
            fontSize: '18px',
            'font-weight': 'lighter',
            display: ['-webkit-box', '-ms-flexbox', 'flex']
	}
})
</script>

当css的属性提供包含多个值的数组时,Vue只会渲染数组中最后一个被浏览器支持的值,如例子中的 display: ['-webkit-box', '-ms-flexbox', 'flex'], 谷歌浏览器只渲染了flex

通过这些例子,加上不断的练习,即可理解和掌握绑定属性的操作,学到这里已经可以充分感受到vue的强大威力了!