<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app1">
<p>姓名:{{username}}</p>
<p>性别:{{gender}}</p>
<p>{{desc}}</p>
<p v-html="desc"></p>
</div>
<div id="app2">
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="">
</div>
<div id="app3">
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<div id="app4">
<h3>count的值为: {{count}}</h3>
<button v-on:click="addCount">+1</button>
<button @click="count+=1">+1</button>
</div>
<div id="app5">
<button @click="flag = !flag">Toggle Flag</button>
<p v-if="flag">请求成功 --- 就 v-if控制</p>
<p v-show="flag">请求成功 --- 被v-show控制</p>
</div>
<div id="app6">
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<ul>
<!-- Vue会倾向于重用标签,我们没有给li标签加上唯一的id,但是标签产生变化了,这就导致我们列表变化后,选中对象变化了 -->
<!-- 这个key唯一表示最好使用数据库中查询出的主键来充当 -->
<li v-for="(user,index) in userList" :key="user.id">
<input type="checkbox"/>id是:{{user.id}},姓名是: {{user.name}}
</li>
</ul>
</div>
<script>
const vm5 = {
data: function(){
return{
userList: [
{id: 1,name:'zhangsan'},
{id: 2,name:'lisi'},
{id: 3,name:'wangwu'}
],
//输入的用户名
name:'',
//下一个可用的id值
nextId:4
}
},
methods:{
addNewUser(){
//往开始位置加元素用unshift
this.userList.unshift({id:this.nextId,name:this.name})
this.name = ''
this.nextId++
}
}
}
const app6 = Vue.createApp(vm5)
app6.mount('#app6')
const vm4 = {
data: function(){
return {
flag:false
}
}
}
const app5 = Vue.createApp(vm4)
app5.mount('#app5')
const vm3 = {
data: function(){
return{
count:100
}
},
methods:{
addCount(){
this.count += 1
}
}
}
const app4 = Vue.createApp(vm3)
app4.mount('#app4')
const vm2 = {
data:function()
{
return{
number:9,
ok:false,
message:'ABC',
id:3,
user:{name:'张三',}
}
}
}
const app3 = Vue.createApp(vm2)
app3.mount('#app3')
const vm1 = {
data: function()
{
return{
link:"http://www.baidu.com",
inputValue:'请输入内容',
imgSrc:'1.png',
w:'500px'
}
}
}
const app2 = Vue.createApp(vm1)
app2.mount('#app2')
const vm={
data()
{
return{
username:'张三',
gender:'男',
desc:'<a href="http://www.baidu.com">百度</a>'
}
}
}
const app1 = Vue.createApp(vm)
app1.mount('#app1')
Vue.createApp({
data(){
return{
message:'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
VUE框架实现页面列表信息主键问题的解决和常见语法实现------VUE框架
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
VUE框架实现JS实现效果传值------VUE框架
VUE框架实现JS实现效果传值------VUE框架
Vue html List -
VUE框架手写实现VUE数据代理机制------VUE框架
VUE框架手写实现VUE数据代理机制------VUE框架
html javascript Vue -
Vue 若依框架常见问题
【代码】Vue 若依框架常见问题。
vue.js javascript 前端 html ide