vue使用什么绑定数据

青灯夜游
풀어 주다: 2022-12-23 12:12:01
원래의
5192명이 탐색했습니다.

vue绑定数据的方法:1、用双大括号“{{}}”把数据给到页面;2、使用vue指令,v-bind指令可实现单向数据绑定,v-model指令可实现双向数据绑定;3、使用“:”,只需在标签属性前加“:”进行绑定即可;4、使用“${}”,只需在数据前拼接字符串用“${}”。

vue使用什么绑定数据

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

Vue绑定数据的几种方式

一、用双大括号 ‘{{}}’ 把数据给到页面

로그인 후 복사

1.png

二、使用vue指令

로그인 후 복사

这边使用的是 v-model 将输入框的值与msg绑定 ,还可以是v-text v-html v-bind等

2.png

1.单向数据绑定(v-bind):数据只能从data流回页面(单向传递)

2.双向数据绑定(v-model):数据不仅可以从data流向页面,还可以从页面流向data

(1)双向数据绑定一般都应用在表单类元素上(如:input select checkbox等)

(2)v-model:value 可以简写为 v-model 因为v-model默认收集的就是value值

三、标签属性前加 ‘ :’ 绑定

로그인 후 복사

3.png

通过:title 将msg的值绑定到cell单元格的title,如果title属性前面忘记加‘ :’的话,页面展示就会变成这样:

在这里插入图片描述

给到title的值就不是data()中的变量 msg 而是字符串“msg”了

四、数据前拼接字符串用`${}`

로그인 후 복사

4.png

【相关推荐:vuejs视频教程web前端开发

위 내용은 vue使用什么绑定数据의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!