vue中html绑定状态值,【第二讲】Vue3.x绑定数据、绑定html、绑定属性、循环数据...

1.1、Vue3.x绑定数据

业务逻辑：

export default {

name: "App",

data() {

return {

msg: "你好vue",

userinfo: {

username: "张三",

age: 20

}

};

},

};

template模板：

msg的值：{{ msg }}

绑定对象：{{ userinfo.username }}

1.2、Vue3.x v-html绑定html

业务逻辑：

export default {

name: "App",

data() {

return {

h2: "

这是一个html内容

"

};

},

};

template模板：

1.3、Vue3.x v-bind绑定属性

业务逻辑：

export default {

name: "App",

data() {

return {

logoSrc: "https://www.itying.com/themes/itying/images/logo.gif"

};

},

};

template模板：

1、绑定属性的第一种写法v-bind:

2、绑定属性的第二种写法:

1.4、v-bind动态参数

...

这里attributeName将被动态地评估为JavaScript表达式，并且其评估值将用作参数的最终值。例如，如果您的组件实例具有一个数据属性attributeName，其值为"href"，则此绑定将等效于v-bind:href

业务逻辑：

export default {

name: "App",

data() {

return {

attributeName: "href",

linkUrl: "http://www.itying.com",

};

},

};

template模板：

这是一个地址

或者

这是一个地址

1.5、v-for循环数组

业务逻辑：

export default {

name: "App",

data() {

return {

list1: ['马总', '刘总', '李总'],

list2: [{

'title': '新闻111'

},

{

'title': '新闻222'

},

{

'title': '新闻33'

},

{

'title': '新闻44'

}

],

list3: [{

"cate": "国内新闻",

"list": [

{

'title': '国内新闻11111'

},

{

'title': '国内新闻2222'

}

]

},

{

"cate": "国际新闻",

"list": [

{

'title': '国际新闻11111'

},

{

'title': '国际新闻2222'

}

]

}

]

};

},

};

template模板：

注意vue3.x中循环数据需要制定key，代码如下

• {{item}}

• {{item.title}}

• {{item.cate}}

  1. {{news.title}}

1.6、v-for循环对象

业务逻辑：

export default {

name: "App",

data() {

return {

myObject: {

title: 'How to do lists in Vue',

author: 'Jane Doe',

publishedAt: '2020-03-22'

}

};

},

};

template模板：

• {{ name }}: {{ value }}--{{index}}