③ Vue基础语法-属性绑定

CRMEB

于 2020-12-16 17:51:23 发布

阅读量2.4k

点赞数 3

分类专栏： Vue 学习笔记文章标签： vue js javascript 小程序

本文链接：https://blog.csdn.net/CRMEB/article/details/111293942

版权

学习笔记同时被 2 个专栏收录

404 篇文章 25 订阅

订阅专栏

Vue

43 篇文章 30 订阅

订阅专栏

目录：

基础语法上篇学习了Vue渲染数据的三种方式，这一节我们将对这三种方式深入学习！

属性绑定

何为属性？

属性指的是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>

以上从testTitle1到testTitle4，声明了4个参数：

1 和 2为两个字符串类型,渲染出字符串！
3 和 4为数字类型，渲染出数字！
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属性

直接传入对象的语法

<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的值来控制显示！

直接放入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>

支持拼接数组

<!-- 支持拼接数组 -->
<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>

支持在数组中嵌套对象

<!-- 支持在数组中嵌套对象 -->
<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属性

使用v-bind绑定style同样支持正则表达式的形式，在格式上可以不使用中括号[]。

<p style="font-weight: bold" :style="isActive ? 'color: red' : 'color: blue'">test6</p>

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

支持对象形式和字符串拼接

不使用单引号的话需要使用驼峰标示的形式
使用单引号需要使用短横线分隔的形式

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

支持直接放入对象,并且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>