<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vueStudy2</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="css/vueTest.css" />
</head>
<body>
<div id="app">
<!-- P15 属性绑定设置class类 -->
<!-- <h1 class="red thin">dadadadadadeh1</h1>
<h1 :class="['thin','italic']">dadadadadadeh1</h1>
<h1 :class="['thin','italic', flag?'active':'']">dadadadadadeh1</h1>
<h1 :class="['thin','italic',{'active':flag}]">dadadadadadeh1</h1>
<!-- {'active':flag} 为一个对象，来代替三元表达式，提高代码可读性 -->
<!-- <h1 :class="{red:true,italic:true,active:true,thin:true}">dadadadadadeh1</h1> -->
<!-- 给class传一个对象，red、thin、active、italic为属性，可带引号也可不带引号 -->
<!-- <h1 :class="classObj">dadadadadadeh1</h1> -->
<!-- 作用同上 -->
<!-- P16 内联样式 style -->
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="{'font-weight':'200'}">yuyuyuyyuy</h1>
<h1 :style="styleObj1">yuyuyuyyuy</h1>
<h1 :style="[ styleObj1,styleObj2]">yuyuyuyyuy</h1> -->
<!-- 利用数组放样式对象 -->
<!-- P17 v-for指令的 4种使用方式 -->
<!-- <p>{{list[0]}}</p> -->
<!-- v-for 常用来写循环操作 -->
<!-- <p v-for="item in list">{{item}}</p> -->
<!-- v-for 循环普通数组 -->
<!-- <p v-for="(item,i) in list">索引值：{{i}} --- 每一项：{{item}}</p> -->
<!-- v-for 循环对象数组 -->
<!-- <p v-for="user in listL">ID: {{user.id}} ---- NAME: {{user.name}}</p> -->
<!-- 加上索引 -->
<!-- <p v-for="(user,i) in listL">ID: {{user.id}} ---- NAME: {{user.name}} ---- 索引：{{i}}</p> -->
<!-- v-for 循环对象 -->
<!-- <p v-for="(val,key,i) in user">值：{{ val}} --- 键：{{key}} ---- 索引{{i}}</p> -->
<!-- 在遍历对象身上的键值对的时候，除了有val，key，在第三个位置上还有一个索引 -->
<!-- v-for 迭代数字 -->
<!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
<!-- 如果使用 v-for 迭代数字的话，前面的count值从 1 开始 -->
<!-- P18 v-for中key的使用注意事项 -->
<!-- <div>
<label>ID：
<input type="text" v-model="id">
</label>
<label>NAME：
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div> -->
<!-- v-for 循环的时候， key 属性只能用 number或string -->
<!-- key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- key 用来保证数据的唯一性 -->
<!-- <p v-for="item in listL" :key="item.id">
<input type="checkbox">
{{item.id}} ---- {{item.name}}
</p> -->
<!-- P19 v-if 和 v-show 的使用和特点 -->
<!-- <input type="button" @click="toggle" value="toggle"> -->
<input type="button" @click="flag=!flag" value="toggle">
<!-- v-if 的特点：每次都会重新删除或创建元素； v-show只是会调整其display属性，不进行DOM的删除或创建 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁地切换，最好不要使用v-if -->
<!-- 如果元素可能永远也不会被显示出来，则推荐使用 v-if ，推荐 v-show-->
<h3 v-if="flag">这是用v-if 控制的元素</h3>
<h3 v-show="flag">这是用v-show 控制的元素</h3>
</div>
<script>
//new 出来的这个vm对象就是 MVVM 中的VM调度者
var vm = new Vue({
el: '#app',
data:{
flag:true,
// classObj:{red:true,italic:true,active:true,thin:true},
// styleObj1:{color:'red','font-weight':200},
// styleObj2:{'font-style':'italic'},
// list:[1,2,3,4,5,6], //新建一个数组
/* listL:[
{id:1,name:'zs'},
{id:2,name:'rr'},
{id:3,name:'ee'},
{id:4,name:'ww'},
],*/
// id:'',
// name:''
/*user:{
id:1,
name:'Anne',
gender:'男'
}*/
},
methods:{
// add(){
// // this.listL.push({id:this.id,name:this.name})
// this.listL.unshift({id:this.id,name:this.name})
// }
toggle(){
this.flag=!this.flag
}
}
});
</script>
</body>
</html>
12-28
1077
1077
04-19
3万+
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
