目录：
- 初探vue
- Vue基础语法 - 渲染类型
基础语法上篇学习了Vue渲染数据的三种方式，这一节我们将对这三种方式深入学习！
属性指的是Html元素的属性，例如标签的就是一个属性！
绑定属性一般是通过指令来执行，指令不同于双大括号的模板语法，它只能渲染Html内容，不能渲染Html标签的属性，这就是指令存在的意义！
- 语法：
当使用指令绑定元素的属性后，属性（class）就相当于参数，classProperty为预期值，一般在实际应用中，v-bind绑定的属性值都是通过计算得来 或者 是一个通过判断时刻变化的值！
- 例子：
以上从testTitle1到testTitle4，声明了4个参数：
- 1 和 2为两个字符串类型,渲染出字符串！
- 3 和 4为数字类型，渲染出数字！
- testObj 为一个 Object对象，渲染出toString()方法的返回值！
- testArr 为一个 Array(数组)，渲染出toString()方法的返回值！
- testMethod 为一个方法，渲染出方法的返回值！
然后分别通过v-bind指令绑定到了P标签的title属性，进行渲染！
- 执行结果如下：
注意观察以上绑定的对象打印出来的为，此时就有些懵逼了，貌似打印出来的是对象的方法打印的值！
- 验证一下, 新增以下代码：
如上面所示，重写了 testObj 的 toString 方法，再来看一下页面的结果：
可以发现，绑定 属性已经被修改为 方法的 值了。
与之类似也是打印的方法的返回值！
由此可以看出是支持单一JavaScript表达式的，并且支持直接绑定Object对象和方法。如果绑定为 Object 对象的话，那么会绑定对象的 toString() 方法的返回值。如果绑定为方法的话，那么会绑定方法的返回值。
v-bind在绑定class和style内联样式属性时，除了支持字符串之外，还可以直接使用对象或数组。
这是因为，操作元素的 class 列表和内联样式是数据绑定是一个常见需求。所以，Vue.js对这一块 做了专门的增强。
绑定Class属性
- 直接传入对象的语法
例子：
通过在控制台 的值来控制显示！
- 直接放入key-vlaue形式的对象
- 直接复用以上的例子，新添加数据：
- 支持拼接数组
4. 支持使用正则表达式
- 支持在数组中嵌套对象
绑定内联style属性
- 使用v-bind绑定style同样支持正则表达式的形式，在格式上可以不使用中括号。
例子解析： 如果isActive的值为true，p元素的color为red，否则color为blue。
- 支持对象形式和字符串拼接
- 不使用单引号的话需要使用驼峰标示的形式
- 使用单引号需要使用短横线分隔的形式
- 支持直接放入对象,并且Vue支持自动添加css前缀
如：-webkit-、-moz-等
当css的属性提供包含多个值的数组时，Vue只会渲染数组中最后一个被浏览器支持的值,如例子中的 ， 谷歌浏览器只渲染了。
通过这些例子，加上不断的练习，即可理解和掌握绑定属性的操作，学到这里已经可以充分感受到vue的强大威力了！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/70299.html