1-vue一些简单的指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的学习title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
head>
<body>
<div id="app">
{{message}}
<span v-bind:title="message">悬停span><br/>
<h1 v-if="type==='abc'">type是abch1>>
<h1 v-else>type不是abch1><br/>
<li v-for="(item,index) in items">
{{item.a}}
{{index}}
li>
<button v-on:click="sayHi()">点击1button>
<button v-on:click="sayHi2('你好')">点击2带参button><br/>
双向绑定:<input type="text" v-model="textdata"/> _textdata={{textdata}}<br/>
textarea多行文本:<textarea v-model="textareadata">textarea>> 绑定值:{{textareadata}}<br/>
<input type="radio" name="sex" value="男" v-model="sex" >男
<input type="radio" name="sex" value="女" v-model="sex">女 选中的为:{{sex}}<br/>
<select v-model="sectiondata">
<option value="" disabled>请选择---option>
<option value="AA">Aoption>
<option value="BB">Boption>
<option value="CC">Coption>
select>选中的是:{{sectiondata}}
div>
<script>
var vm=new Vue({
el:"#app",
//model:数据
data: {
sectiondata:'',
sex:'',
textareadata:'',
textdata:'',
type: '1abc',
message: 'hello message2',
items: [
{a: '我是a'},
{a: '我是a'},
{a: '我是a'}
],
},
//方法必须定义在vue的methods对象中!
methods:{
//方法名为sayhi
sayHi:function () {//方法体
alert("触发sayhi方法==我是data里的message="+this.message);
},
sayHi2:function (a) {
alert(a);
}
},
});
script>
body>
html>
`
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）