NoneType对象没有属性（nonetype对象没有属性type）



目录：

1. 初探vue
2. 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属性，进行渲染！
  
  

• 执行结果如下：

注意观察以上绑定的对象打印出来的为，此时就有些懵逼了，貌似打印出来的是对象的方法打印的值！

• 验证一下, 新增以下代码：

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

与之类似也是打印的方法的返回值！

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

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

绑定Class属性

1. 直接传入对象的语法

例子：

通过在控制台 的值来控制显示！

2. 直接放入key-vlaue形式的对象

• 直接复用以上的例子，新添加数据：

3. 支持拼接数组

4. 支持使用正则表达式

5. 支持在数组中嵌套对象

绑定内联style属性

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

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

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

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

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

如：-webkit-、-moz-等

当css的属性提供包含多个值的数组时，Vue只会渲染数组中最后一个被浏览器支持的值,如例子中的 ， 谷歌浏览器只渲染了。

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/76983.html