如何使用VUE给模板标签中的属性赋值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用VUE给模板标签中的属性赋值相关的知识，希望对你有一定的参考价值。
参考技术A 1、给html模板中的标签的属性赋值需要使用v-bind函数；Vue基础模板语法的认识
模板语法
mustache 语法中是支持写js的
-
用法：
-
内容： 必须加 js语法
-
属性: 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
-
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性
<img src = "" />
?
//data-index就是自定义属性 ， web网页中建议我们使用data-形式来定义自定义属性
<img data-index = "0" />
? -
思考： Vue现在想要在html中使用自己的属性，并且要和他的语法和数据结合？
-
咋整？
-
分析： 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
-
Vue给这种带v标识的属性，起了一个名字： 指令【 借鉴angular 】
<div v-html = "msg">
</div> -
-
-
-
-
研究它js的支持性
-
数据类型
-
市场上js的数据类型分类有两种？
-
第一种
-
初始数据类型： number string null undefine boolean
-
引用数据类型: Object [ function array ... ]
-
-
第二种
-
基础数据类型: number string boolean
-
特殊数据类型： null undefine
-
复杂数据类型； Object [ function array ...]
-
-
-
-
输出语法
-
console
-
alert
-
-
表达式 / 运算符
-
三元表达式
-
-
-
总结;
-
null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
-
挂载在window身上的全局属性，我们都不能用的： 比如; console alert
-
不写流程控制
-
for
-
if
-
while
-
do...while
-
-
支持三元表达式，同样也支持运算符
-
短路原则也是支持的
-
-
2.2 指令
指令的目的是做什么： 操作DOM
解释 : MVVM vm -> v 数据驱动
所以： 今天开始，我们不想二阶段一样操作dom，改成操作数据，数据要想操控DOM,那么我们需要依赖指令，因为指令是直接绑定在dom身上的
-
v-html 转义输出，也就是可以解析 xml 数据
-
v-text： 非转义输出，也就是无法解析 xml 类型数据
-
v-bind
-
将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值
<img v-bind:src = "src" />
<div v-bind:class = "">
</div>
<div v-bind:style = "">
</div> -
简写形式
<img v-bind:src="src" alt="">
<img :src="src" alt=""> -
类名绑定
-
用法
-
对象形式用法
<p :class = " bg: true,size: true "></p>
<p :class = " bg: true,size: false "></p>
<p :class = " [classA]: true,[classB]: true "></p> -
数组形式用法
<p :class = "[ ‘size‘,‘bg‘ ]"></p>
<p :class = "[ classA,classB ]"></p>
<p :class = "[ classA,classB,5>3?‘a‘:‘b‘]"> </p>
-
-
-
样式绑定
-
用法
-
对象形式用法
-
数组形式用法
-
-
-
以上是关于如何使用VUE给模板标签中的属性赋值的主要内容，如果未能解决你的问题，请参考以下文章