05《Vue 入门教程》Vue 动态样式绑定

05《Vue 入门教程》Vue 动态样式绑定

本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。

掌握样式绑定的多种形式是其中的重点难点。

同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。 通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。 我们可以通过数组和对象的两种形式绑定元素的 Class。 通过传给 v-bind:class 一个对象，以动态地切换 class： 代码解释： 上面的语法表示 show 这个 class 存在与否将取决于数据属性 isShow 是否为真值。

具体示例： 实例演示 “运行案例” 可查看在线运行效果 代码解释： HTML 代码第 2 行，我们给 p 绑定样式，当 isHide 为真值时， 其渲染结果为 ，否则 。 打开控制台，修改 vm.isHide 的值可以动态改变页面效果。 此外， v-bind:class 指令也可以与普通的 class 属性共存。

语法： 当有如下模板: 和如下 data： 结果渲染为： 代码解释： 当 isShow 或者 hasError 变化时，class 列表将相应地更新。 例如，如果 hasError 的值为 true ， isShow 的值为 true ，class 列表将变为 “defaultClass show text-danger” 。 例如，如果 hasError 的值为 true ， isShow 的值为 false ，class 列表将变为 “defaultClass text-danger” 。

在之前介绍的案例中，我们将绑定的数据对象内联定义在模板里， 这样显得比较繁琐。其实，我们可以统一定义在一个 classObject 中： 实例演示 “运行案例” 可查看在线运行效果 结果渲染为： 代码解释： HTML 代码中，我们首先给 p 一个固定样式 defaultClass， 然后通过 classObject 给 p 绑定样式。 JS 代码 第 6-9 行，我们定义了数据 classObject，它有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。

所以，最后页面渲染的效果是： 我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式： 实例演示 “运行案例” 可查看在线运行效果 结果渲染为： 代码解释： HTML 代码中，我们通过 classObject 给 p 绑定样式。 JS 代码 第 6-11 行，我们定义了计算属性 classObject，它返回一个对象，该对象有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。所以，最后页面渲染的效果是： 我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表： 实例演示 运行案例点击 “运行案例” 可查看在线运行效果 渲染为： 代码解释： 在 HTML 代码中，我们通过数组给 p 绑定样式，数组中有 classA 和 classB 两个值。

在 JS 代码第 6-7 行定义了 classA 和 classB 两个字符串，它的格式和元素 class 的格式相同，不同的样式类之间以空格相隔。 如果你也想根据条件切换列表中的 class，可以用三元表达式： 这样写将始终添加 classB 的样式，但是只有在 isShow 为真时才添加 showClass 。 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象的形式来表达数组中的某一项： 代码解释： 在 HTML 中，p 绑定一个样式数组，数组第一项是一个对象表达式 { showClass: isShow }。

当 isShow 为 true 时样式最终绑定为： ；当 isShow 为 false 时样式最终绑定为： ； 和 Class 的绑定一样，Style 的绑定同样可以通过数组和对象的两种形式。 v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： 实例演示 “运行案例” 可查看在线运行效果 渲染为： 代码解释： 在 HTML 代码中，我们给 p 绑定 background-color 和 width 两个内联样式，它们的值在 data 中定义。 在模板中写较为复杂的表达式语法显得比较繁琐，通常直接绑定到一个样式对象更好，这会让模板显得更加清晰： 实例演示 “运行案例” 可查看在线运行效果 渲染为： 代码解释： 在 HTML 代码中，我们给 p 绑定数据 styleObject，它们的值在 data 中定义。

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： 实例演示 “运行案例” 可查看在线运行效果 渲染为： 本小节我们学习了如何通过 v-bind 来动态绑定样式。

10《Vue 入门教程》Vue 双向绑定指令

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model 。 v-model 的学习相对简单。

我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。2. 木子解释用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义
v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。

它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面 DOM 的更新。3. 基本用法接下来我们将详细介绍 v-model 在不同表单元素上的使用。3.1 单行文本 input实例演示 Document 名称是: {{ name }} 12345678910111213141516171819202122232425″运行案例” 可查看在线运行效果
代码解释： 上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。

同理，我们在控制台通过 vm.name = “” 给 name 赋值时输入框的内容也会发生改变。3.2 多行文本 textarea实例演示 Document 描述是: {{ desc }} “运行案例” 可查看在线运行效果 代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vm.desc = “” 给 desc 赋值时输入框的内容也会发生改变。

实例演示 “运行案例” 可查看在线运行效果 代码解释： 上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vm.isDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。 实例演示 “运行案例” 可查看在线运行效果 代码解释： 上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vm.types = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

实例演示 “运行案例” 可查看在线运行效果 代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。 实例演示 “运行案例” 可查看在线运行效果 代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vm.company = 0 给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）： 但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。 代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时 vm.isDelivery === ‘yes’ ，当没有选中时 vm.isDelivery === ‘no’ 代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vm.pick === vm.a 。 代码解释： 上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当 该 option 选中时 vm.selected 的值为 { number: 123 } 。 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 （除了上述输入法组合文字时）。

vue2启动成功了，但是无法访问

172.0.0.1:8080可不可以访问？确定你的8080端口闲置的吗？找到config文件夹下的index.js文件,修改host:“localhost”为 host:”0.0.0.0″，然后用ip访问试试看。