前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

{{msg}}这个叫插值表达式

前端学习03-Vue-指令-单向绑定&双向绑定

现在就想让他变成大标题的样式

<span v-html="msg"></span>

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

<span v-text="msg"></span>

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

插值表达式,只要有返回值就可以使用

 {{1+1}} {{hello()}}

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

插值表达式只能用在标签体里面,不能用在标签的属性里面,比如给a标签的href属性绑定值,就不能做到了,需要使用v-bind

使用v-bind来给html标签的属性绑定

前端学习03-Vue-指令-单向绑定&双向绑定

可以看到绑定成功,点击可以跳转

前端学习03-Vue-指令-单向绑定&双向绑定

绑定class和style

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

这个是单向绑定,就是我们改变了代码的值,页面会发生变化,而直接改页面的值,代码就不会发生变化了

这样字体就变成蓝色的了

前端学习03-Vue-指令-单向绑定&双向绑定

vue对象的值也是blue

前端学习03-Vue-指令-单向绑定&双向绑定

然后这样改,虽然可以变成蓝色,

前端学习03-Vue-指令-单向绑定&双向绑定

但是vue对象里面的值还是red

前端学习03-Vue-指令-单向绑定&双向绑定

v-bind只能单向绑定,双向绑定用v-model

v-model

前端学习03-Vue-指令-单向绑定&双向绑定

现在没有选择,language里面是空的

前端学习03-Vue-指令-单向绑定&双向绑定

然后我们勾上java和php,数据就直接绑定了

前端学习03-Vue-指令-单向绑定&双向绑定

刷新后,我们直接在控制台直接给值,页面也可以勾选上

前端学习03-Vue-指令-单向绑定&双向绑定

前端学习03-Vue-指令-单向绑定&双向绑定

我们还可以看选中了哪些

前端学习03-Vue-指令-单向绑定&双向绑定

 

前端学习03-Vue-指令-单向绑定&双向绑定