Vue02基础语法-插值+过滤器+计算属性+计算属性

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

html模板语法:这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

1.1 插值

1.1.1 文本

使用{ {msg}}的形式，标签将会被替换成为数据对象（data）上msg属性值，当绑定的数据对象上的msg属性值发生变化时，插值处的值也会发生变化（双向绑定）

1.1.2 html

{ {}}的方式将数据处理为普通文本，如果要输出html，需要使用v-html指令

//在data中定义一个html属性，其值为html
data: {
    html:  '<input type="text" value="hello"/>'
}

//在html中取值
<span v-html="html"></span>

1.1.3 属性

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(propName, propVal)

//定义一个样式
<style>
.redClass {
    font-size: 30px;
    color: red;
}
</style>

//在data中定义一个属性，其值为上面定义的样式名
data: {
    red: 'redClass'
}

//在html使用v-bind指令设置样式
<p>设置之前:  aaaa</p>
<p>设置之后: <span v-bind:class="red">aaa</span></p>

以上结果在浏览器中可以看到相应的效果

1.1.4 表达式

几种常见的表达式：

{ {str.substr(0,6).toUpperCase()}}

{ { number + 1 }}

{ { ok ? 'YES' : 'NO' }} 三元运算符

<li v-bind:>我的Id是js动态生成的</li>

示例1：

//在html中加入元素，定义表达式
<span>{
  
  {str.substr(0,6).toUpperCase()}}</span>

//在data中加入一个属性，名为str与html中对应
data: {
    str: 'hello vue'
}

查看效果：字符串被截取，并转换为大写

示例2：

<span>{
  
  { number + 1 }}</span>

//在data中加入一个属性，名为str与html中对应
data: {
    number: 10
}

在data中定义的number值将会被加1

示例3：

//这是一个三元运算，如果ok为true，表达式值为YES ，如果ok为false则表达式值为NO
<span>{
  
  { ok ? 'YES' : 'NO' }}</span>

//在data中加入一个属性，名为str与html中对应
data: {
    ok: true
}

示例4：

//演示id属性绑定和动态赋值
<p>
    <input type="text" v-bind:id="bookId"/></br>
    <!--动态生成Id-->
    <input type="text" v-bind:id="'bookList_' + id"/>
</p>

data: {
    bookId: 'book001',
    id: 'book002'
}

该示例可以通过开发者工具查看生成的id属性值。

最低0.47元/天解锁文章

新学期VIP享超值加赠