<!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">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<title>Document</title>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.width{
width:100px;
}
</style>
</head>
<body>
<div id="app">
{{ title }}
<!-- <img v-bind:src="url" :alt=name> -->
<!-- <h4>{{ title }}</h4>
<div :class="[bg_color,width]">123</div>
<div :class="[{red:flag},width]">123</div>
<div :class="[width]" :style="[{width:width1,height:'100px'}, border1 ]">样式</div>
<div :class="[flag?'red':'']"> 三元表达式 </div>
<div :class="[flag && 'red']"> 与表达式 </div> -->
<!-- 示例，点击按钮，更换颜色 -->
<!-- <h4 :class="arr[index]">{{ title }}</h4>
<button v-on:click="handleClick($event)">点击更换颜色</button>
<button @click="handleClick($event)">点击更换颜色</button> -->
<!-- v-if 能够控制显示和隐藏 -->
<!-- <div class="red" style="width: 50px;height: 50px;" v-if=flag></div>
<div class="green" style="width: 50px;height: 50px;" v-else></div>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- v-if 和 v-else 连着出现，v-elseif -->
<!-- <div class="red" style="width: 50px;height: 50px;" v-if="index===0"></div>
<div class="yellow" style="width: 50px;height: 50px;" v-else-if="index===1"></div>
<div class="green" style="width: 50px;height: 50px;" v-else></div>
<button @click = "handleClick" >{{ text }}</button> -->
<!-- template的使用 -->
<!-- <template v-if="flag">
<div class="red" style="width: 50px;height: 50px;" ></div>
<div class="yellow" style="width: 50px;height: 50px;" ></div>
</template>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- v-show 和 v-if 区别 -->
<!--1、 v-show 控制dom的display 的显示和隐藏
v-if 控制dom 元素的移除和添加
2、v-if 可以在template使用，v-show 不行
-->
<!-- <template v-show="flag">
<div class="red" style="width: 50px;height: 50px;" v-show="flag"></div>
<div class="yellow" style="width: 50px;height: 50px;" ></div>
</template>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- 列表渲染 -->
<!-- 数组 (item , index_for) in arr_for-->
<!-- <ul>
<li v-for="(item , index_for) in arr_for"> {{ index_for }} === {{ item }} </li>
</ul> -->
<!-- 对象 (value,key,index) in obj -->
<!-- <h4 v-for = "(value,key,index) in obj">{{ index }} === {{ key }} === {{ value }}</h4> -->
<!-- 数字 正数 从1开始-->
<!-- <h4 v-for="item in 10">{{ item }}</h4> -->
<!-- 字符串 -->
<!-- <h4 v-for="item in 'afefefe'">{{ item }}</h4> -->
<!-- :key 里面的值要唯一，它可以提高性能，例如当反转的时候，原先是直接操作dom 复制，现在，发现只要是key相等，就会复制key -->
<!-- <ul>
<li v-for=" item in arr_for" :key = "item">{{ item }}</li>
</ul> -->
<!-- 数组对象的便利v-for -->
<!-- <ul>
<li v-for="item in objs " :key="item.id">{{ item.name }}</li>
</ul> -->
<!--key 例子 这里如果key不设置的话，pwd 的input会复用 usr的input ==============很重要============== -->
<!-- <div v-if="flag">
usr:<input type="text" key="usr">
</div>
<div v-else>
pwd:<input type="password" key="pwd">
</div>
<button @click="handle">点击切换</button> -->
<!-- 向数组中添加值
1、不能通过索引的方式更改数组，这样不能渲染
2、不能通过更改长度的方式更改数组，也不能渲染。
必须调用数组的方法去更改数组。
pop shift unshift splice sort reverse push
-->
<!-- <ul>
<li v-for="item in arr_for">{{item}}</li>
</ul> -->
<!-- 对象属性的更改 -->
<!-- 可以更改，但是不能添加和删除
添加和删除要用特定的方法
$set(this.obj, 'salary','1000');
-->
<!-- {{obj}} -->
<!-- <button @click="add">点击添加</button> -->
<!-- 数据的双向绑定 v-model就可以实现 -->
<div>
<!-- <input type="text" :value="value" @input="handleInput"> -->
<!-- <input type="text" v-model="value">
<span>{{ value }}</span>
<textarea v-model="content"></textarea>
{{content}}
<input type="checkbox" v-model="checkbox">
{{checkbox}} -->
<!-- 多选 -->
<!-- <label for="html">html</label>
<input type="checkbox" value="a" id="html" v-model="checkboxList">
<label for="js">js</label>
<input type="checkbox" value="js" id="js" v-model="checkboxList">
<label for="css">css</label>
<input type="checkbox" value="css" id="css" v-model="checkboxList">
{{checkboxList}} -->
<!-- 单选 -->
<!-- <label for="html">html</label>
<input type="radio" id="html" value="html" v-model="radio">
<label for="js">js</label>
<input type="radio" id="js" value="js" v-model="radio">
<label for="css">css</label>
<input type="radio" id="css" value="css" v-model="radio">
{{radio}} -->
<!-- 下拉框 单选-->
<select name="" id="" v-model="selected">
<option value="" disabled>请选择</option>
<option value="html">html</option>
<option value="js">js</option>
<option value="css">css</option>
</select>
{{selected}}
<!-- 下拉框 多选-->
<select name="" id="" v-model="selected_mul" multiple>
<option value="" disabled>请选择</option>
<option value="html">html</option>
<option value="js">js</option>
<option value="css">css</option>
</select>
{{selected_mul}}
</div>
</div>
<script>
const vm = new Vue({
// el:"#app",
data:{
a:123,
title:"学习vue ",
url:"https://img-blog.csdn.net/20180228100949515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpcGVuZzI1MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70",
name : "图片",
bg_color: "red",
width:"width",
flag: true,
width1:"200px",
border:"10px solid green",
border1:{
border:"10px solid green"
},
arr:['red','green','yellow'],
index: 0,
text:"隐藏",
arr_for:['html','css','javascript','java','mysql'],
obj:{
name : "费小波",
age : "24",
sex : "男"
},
objs:[
{
name:'a',
id:001
},
{
name:'b',
id:002
},
{
name:'c',
id:003
},
{
name:'d',
id:004
},
],
value:"双向绑定",
content:"fefeflkej",
checkbox:true,
checkboxList:[],
radio:'',
selected:'',
selected_mul:[]
},
methods: {
handleClick : function(e) {
console.log(e);
this.index ++;
this.index = this.index%3;
},
hide_show : function(){
this.flag = !this.flag;
this.text = this.flag ? "隐藏" : "显示";
},
handle : function(){
this.flag = !this.flag;
},
add : function(){
// const length = this.arr_for.length;
// this.arr_for[length] = "vue";
// this.arr_for.push('number');
// this.obj.name = "111111";
// this.obj.salary = "1000";
// delete this.obj.name ;
// 这两种方法都不行，必须用$set
this.$set(this.obj,'salary',10000);
},
handleInput : function(e){
this.value = e.target.value;
}
}
})
vm.$mount('#app');
vm.a = 100;
// console.log("修改后的a:"+vm.a);
// console.log("修改后的html"+vm.$el.innerHTML);
vm.$nextTick( function(){
console.log(vm.$el.innerHTML);
})
</script>
</body>
</html>
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
