感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="app" v-if="seen">
<p>
==声明式渲染 和 v-if的例子==
</p>
<p >
{{ message }}
</div>
<div id="app2">
==v-bind例子==
<span :title="message">鼠标悬停,查看信息</span>
==v-for例子==
<div id="app3">
<ol>
<li v-for="todo in todos">
{{todo.text}}你喜欢吃吗?回答:{{todo.love}}
</li>
</ol>
==v-on例子==
<div id="app4">
{{message}}
<button v-on:click='reverseMessage'>
逆转消息
</button>
<div id="app5">
<input v-model="message">
==组件例子==
<div id="app6">
<todo-item v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</body>
</html>
xxxxxxxxxx
var app = new Vue({
el: '#app',
data: {
message: '显示出了',
seen:true
}
})
var app2 = new Vue({
el: '#app2',
message: 'app2'
var app3 = new Vue({
el:'#app3',
data:{
todos:[
{text:'土豆',love:'yes'},
{text:'花生',love:'yes'}
]
var app4 = new Vue({
el:'#app4',
message:'好饿啊!'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
var app5 = new Vue({
el:'#app5',
message:'hi'
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
var app6 = new Vue({
el:'#app6',
groceryList:[
{id:0,text:'potato'},
{id:1,text:'banana'}
输入 CSS 代码……