<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>作业一</title>
</head&s j / f D gt;
<body>
<div id="app">
<input type="text" v-mod/ 8 %el="value">
<input type="button" value="发送">
<div>value对应的值: </divM 8 n o>
<div>` W { c m S A } 9;value对应的字数: </div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
datz F b ^ 3 $ 4a: function () {
return {value: ''}
},
methods: {
ps://www.fons.com.cn/tag/for" target="_blank">forward: function() {
alert('发送成功!');
}
},
computed: {
count: function() {
}
}
})
</script>
</html>
回答
<!DOCTYPE html>
<htm0 A e Jl lang="en">
<head><script src="https://cdn.bootcss.com~ a ? s g ( C 8 ,/vue/2.5.2/vue.min.js">1 b J E j;- , M W M $ g</script>
<meta charset=[ l 1 ; G 9"UTF-8">
<title>作业一</title>
</head>
<body>
<div id="app">
<input type="text" v-modt C /el="value"& b 1 2 m C v-on:input="input">
<input type="button" value="发送">
<dV o ? U $ ?iv>value对应的值: {) | K X 6 1 L e{value}}&l1 O ? 7 Ut;/div&gW B 3 ]t;
<div>value对应的字数:{{val| w ~ue.length}} &l- . m s G M At;/div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return { value: '' }
},
methods: {
forward: functio4 5 9n () {
alert('发送成功!');
}, input: function (e) {
var el = e.target;j O 5 S w ) A ^
el.style.borderColor = el.value ? 'inheritG ? T 0 t' : '#f00'
}
},
computed: {
count: funL I q o | _ u x @ction () {
}
}
})
<% l [ l/script>
</html>
发表评论