<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="nickname">
{{nickname}}
<h1>{{nickname.toUpperCase()}}</h1>
<div v-html='str'></div>
<table>
<tr>
<th>序号</th>
<th>品牌</th>
</tr>
<tr v-for="(item,i) in list">
<td>{{i+1}}</td>
<td>{{item}}</td>
</tr>
</table>
<img v-bind:src="imgUrl">
<h1 v-show="isShow">1111111111</h1>
<h1 v-if="isShow">22222</h1>
<!-- v-show和v-if区别：false时，v-show是隐藏，v-if是删掉的 -->
<button v-on:click="change">切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
isShow:true,//true显示false隐藏
imgUrl:"https://p1.music.126.net/jmSZkitsHu6P2osBGwVEtg==/109951165049297767.jpg?imageView&quality=89",
nickname:"aaa",
str:"<h1>aaa</h1>",
list:['菠萝','香蕉','苹果']
}
},
methods: {
change(){
this.isShow = !this.isShow
}
},
})
</script>
</body>
</html>
