HTML基础-08 vue数据绑定

（1）绑定修改数据，点击

1.div

1.引入vue标签
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>1.{{a}},渲染出变量
2. 点击事件：@click="f1"，
f1() {this.a = "情书";},
this.变量，就这个变量的值=新的值3.绑定：<input v-model="a"></input>，
输入框的内容会修改a这个id的内容<div id="test1">{{a}}<br><span :style="fontstyle">{{a}}</span><br>{{b}}<br>{{c}}<br><button @click="f1">点我</button><button @click="f2">点我</button><input v-model="a"></input><!--v-model等于values--><span :style="lvzs">{{zs}}</span><div ></div></div><script>var test1 = new Vue({el: '#test1',//渲染id为test1的divdata: {a: "Aa",fontstyle: "color:red;font-size:30px",b: "Bb",c: "Cc",zs: "张三",lvzs: "color:green;font-size:30px"},methods: {f1() {this.a = "情书";},f2() {this.b = "我要我们在一起";}}})</script>

（2）使用for遍历修改全部数组里面价格的值

1.页面部分，for遍历循环输出数组
<div id="app">
<div v-for="(i,index) in contents">
{{i.id}}<br> {{i.text}}<br>
<div v-for="(j,index) in i.books">
{{j.name}}，价钱： {{j.price}}
<hr><br>
</div>
</div>
<button @click="f1">点击1</button>
<button @click="f2">点击2</button>
</div>

2.script

2.vue里面的数组和方法
var app = new Vue({
el: '#app',
data: {
contents: [{
id: 1,
text: '学习 JavaScript',
books: [{ name: "老人与海鲜", price: 15 },
{ name: "奇异果博士", price: 20 }]
},
{
id: 2,
text: '学习 Vue',
books: [{ name: "甄嬛传", price: 15 },
{ name: "花千骨折", price: 20 },
{ name: "奇异果博士", price: 20 }]
},
{
id: 3,
text: '整个牛项目',
books: [{ name: "资本谬论", sprice: 20 }]
},
]
},

methods: {
f1() {
this.contents[1].books[0].name = "甄嬛传菜";
//点击选中的这个数组的第2个对象的book里面第一个值改名
},
f2() {
for (let p of this.contents) {
for (let z of p.books){
z.price = "100"
//for循环这个内容，选里面books，改价格
}
}
}
}
})

(3)遍历数组里面的二层数组的信息

1.div里面的内容

<div id="web">
<div v-for="(i,index) in movie">
<div style="font-weight: 800; font-size: 30px;">{{i.title}}</div><br>
<div style="color: coral;">{{i.rate}}</div><br>
<span><img :src="i.cover" style="width: 150px;height:150px;"/></span>
<div style="color: darkgray;font-weight:500;">导演：
<span v-for="(j,index) in i.directors">
<span>{{j}} </span>
</span>



</div><br>
<span style="color:darkgrey;font-weight:500;">主演：
<span v-for="(z,index) in i.casts">
<span>{{z}} </span>
</span>
</span>

<br>
<hr>
<hr>
</div>

2.script

2.vue内容
var web = new Vue({
el: '#web',
data: {
"movie": [{
"directors": ["成志超", "马华干", "李宏宇"],
"rate": "8.6",

"cover_x": 5906,
"star": "45",
"title": "山河令",
"url": "https:\/\/movie.douban.com\/subject\/34923491\/",
"casts": ["张哲瀚", "龚俊", "周也", "马闻远", "孙浠伦"],
"cover": "https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2633696791.jpg",
"id": "34923491",
"cover_y": 10498
},

<div v-for="(i,index) in movie">//第一层循环
<div>{{i.rate}}</div><br>//第一层循环的内容
<span v-for="(j,index) in i.directors">//第二次循环
<span>{{j}} </span>//第二层循环的内容

HTML基础-08 vue数据绑定相关推荐

（转）WindowsPhone基础琐碎总结-----数据绑定（一）
原文地址:http://www.cnblogs.com/fuchongjundream/archive/2012/04/08/2437803.html 一.什么是数据绑定官方这样解释:数据绑 ...
【精讲】vue数据绑定、数据内容的应用、数据结构、数据代理
目录简介 vue数据绑定数据内容的应用数据结构数据代理知识点拓展简介 vue是一款实用的框架,他可以大大提高我们编写项目的速度.在之前的板块中,我们聊过vue框架的实用性,在这一板块,我们 ...
WindowsPhone基础琐碎总结-----数据绑定（一）
一.什么是数据绑定官方这样解释:数据绑定是在应用程序 UI 与业务逻辑之间建立连接的过程.简单的理解就是通过数据绑定的方式实现了后台数据和前台UI元素的关联,可以比喻成UI元素和数据源的桥梁 ...
Vue数据绑定和响应式原理
Vue数据绑定和响应式原理当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
Hive基础08、Hive引入Struct结构体
Hive基础08.Hive引入Struct结构体 1.建表语句创建一个温良贤淑女子的表英文关键字解析: 1.CREATE TABLE 创建一个指定名字的表,如果库中已有相同名的表,则抛出异常: 用 ...
第二章 VUE数据绑定和渲染（1）
这节课主题是如何将数据动态绑定到html中并渲染出来. 在一般情况下,前端展示的动态数据,都是从后端(如JAVA,C#,PHP等后端语言提供数据,一般都是json格式)获得数据后,进行解析并渲染到ht ...
【SQL数据库基础08】变量--系统变量：全局、会话、自定义变量
文章目录一.系统变量 1.查看所有系统变量 2.查看满足条件的部分系统变量 3.查看指定的系统变量的值 4.为某个系统变量赋值 1.1 全局变量 ①查看所有全局变量 ②查看满足条件的部分系统变量 ③ ...
Vue数据绑定（单向绑定和双向绑定）
Vue数据绑定有两种方法,单向绑定(v-bind)和双向绑定(v-model). 一.单向绑定(v-bind) 1.数据只能从data到页面 2.我们以输入框(input)举例 3.我们可以把v-bi ...
vue的基础知识-vue基础入门
vue的使用分享 1. Vue简介 2.Vue常用指令 3. V-router路由系统 4. Vue生命周期 1. Vue简介工欲善其事,必先利其器 1.1 Vue是什么? Vue (读音 /vju ...

HTML基础-08 vue数据绑定

HTML基础-08 vue数据绑定相关推荐

最新文章

热门文章