teratail
回答率
85.29%
質問するログイン新規登録
トップVue.jsに関する質問Vue.jsでHTML内のテキスト・属性を参照したい

編集履歴

回答編集履歴

6

テンプレート部分の整形

2016/08/28 13:41

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -15,9 +15,14 @@
15
15
  <script type="x/template" id="word-counter">
16
16
  <div class="counter">
17
17
  <textarea class="area" rows="4" cols="40" v-model="message">{{message}}</textarea>
18
+ <p class="count" :class="{error: isWordOver}">
18
- <p class="count" :class="{error: isWordOver}"><span class="countNum">文字数：{{wordCount}}</span>
19
+ <span class="countNum">文字数：{{wordCount}}</span>
19
- <span class="countMax">{{maxWord}}</span></p>
20
+ <span class="countMax">{{maxWord}}</span>
21
+ </p>
22
+ <p class="line" :class="{error: isLineOver}">
20
- <p class="line" :class="{error: isLineOver}"><span class="countNum">行数：{{lineCount}}</span><span class="countMax">{{maxLine}}</span></p>
23
+ <span class="countNum">行数：{{lineCount}}</span>
24
+ <span class="countMax">{{maxLine}}</span>
25
+ </p>
21
26
  </div>
22
27
  </script>
23
28
  ```

5

v-bind: を : の省略表記に変更

2016/08/28 13:41

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -15,9 +15,9 @@
15
15
  <script type="x/template" id="word-counter">
16
16
  <div class="counter">
17
17
  <textarea class="area" rows="4" cols="40" v-model="message">{{message}}</textarea>
18
- <p class="count" v-bind:class="{error: isWordOver}"><span class="countNum">文字数：{{wordCount}}</span>
18
+ <p class="count" :class="{error: isWordOver}"><span class="countNum">文字数：{{wordCount}}</span>
19
19
  <span class="countMax">{{maxWord}}</span></p>
20
- <p class="line" v-bind:class="{error: isLineOver}"><span class="countNum">行数：{{lineCount}}</span><span class="countMax">{{maxLine}}</span></p>
20
+ <p class="line" :class="{error: isLineOver}"><span class="countNum">行数：{{lineCount}}</span><span class="countMax">{{maxLine}}</span></p>
21
21
  </div>
22
22
  </script>
23
23
  ```

4

不要設定の削除

2016/08/28 13:35

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -38,10 +38,6 @@
38
38
  props: ["message", "maxWord", "maxLine"],
39
39
  data: function() {
40
40
  this.message = this.message || '';
41
- return {
42
- isWordOver: false,
43
- isLineOver: false
44
- };
45
41
  },
46
42
  computed: {
47
43
  wordCount: function() {

3

computedで処理する形に変更

2016/08/28 13:19

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <script type="x/template" id="word-counter">
16
16
  <div class="counter">
17
- <textarea class="area" rows="4" cols="40" v-on:keyup="isOver()" v-model="message">{{message}}</textarea>
17
+ <textarea class="area" rows="4" cols="40" v-model="message">{{message}}</textarea>
18
18
  <p class="count" v-bind:class="{error: isWordOver}"><span class="countNum">文字数：{{wordCount}}</span>
19
19
  <span class="countMax">{{maxWord}}</span></p>
20
20
  <p class="line" v-bind:class="{error: isLineOver}"><span class="countNum">行数：{{lineCount}}</span><span class="countMax">{{maxLine}}</span></p>
@@ -56,15 +56,12 @@
56
56
  }
57
57
 
58
58
  return count;
59
- }
60
- },
61
- methods: {
62
- isOver: function() {
63
- this.isWordOver = this.detectError(this.wordCount, this.maxWord);
64
- this.isLineOver = this.detectError(this.lineCount, this.maxLine);
65
59
  },
66
- detectError: function(count, max) {　
60
+ isWordOver: function(){
67
- return count > max;
61
+ return this.wordCount > this.maxWord;
62
+ },
63
+ isLineOver: function() {
64
+ return this.lineCount > this.maxLine;
68
65
  }
69
66
  }
70
67
  });

2

関数名の変更

2016/08/28 13:13

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <script type="x/template" id="word-counter">
16
16
  <div class="counter">
17
- <textarea class="area" rows="4" cols="40" v-on:keyup="count()" v-model="message">{{message}}</textarea>
17
+ <textarea class="area" rows="4" cols="40" v-on:keyup="isOver()" v-model="message">{{message}}</textarea>
18
18
  <p class="count" v-bind:class="{error: isWordOver}"><span class="countNum">文字数：{{wordCount}}</span>
19
19
  <span class="countMax">{{maxWord}}</span></p>
20
20
  <p class="line" v-bind:class="{error: isLineOver}"><span class="countNum">行数：{{lineCount}}</span><span class="countMax">{{maxLine}}</span></p>
@@ -59,7 +59,7 @@
59
59
  }
60
60
  },
61
61
  methods: {
62
- count: function() {
62
+ isOver: function() {
63
63
  this.isWordOver = this.detectError(this.wordCount, this.maxWord);
64
64
  this.isLineOver = this.detectError(this.lineCount, this.maxLine);
65
65
  },

1

JS修正

2016/08/28 12:50

投稿

yamato_hikawa
yamato_hikawa

スコア2098

answer CHANGED
@@ -36,25 +36,25 @@
36
36
  Vue.component("word-counter", {
37
37
  template: "#word-counter",
38
38
  props: ["message", "maxWord", "maxLine"],
39
- data: function() {
39
+ data: function() {
40
- this.message = this.message || '';
40
+ this.message = this.message || '';
41
41
  return {
42
42
  isWordOver: false,
43
43
  isLineOver: false
44
44
  };
45
45
  },
46
46
  computed: {
47
- wordCount: function(){
47
+ wordCount: function() {
48
48
  return this.message.length;
49
49
  },
50
- lineCount: function(){
50
+ lineCount: function() {
51
- var newLineArr = this.message.match(/\n/g) || [],
51
+ var newLineArr = this.message.match(/\n/g) || [],
52
- count = newLineArr.length + 1;
52
+ count = newLineArr.length + 1;
53
53
 
54
- if (this.message.length === 0) {
54
+ if (this.message.length === 0) {
55
- count = 0;
55
+ count = 0;
56
- }
56
+ }
57
-
57
+
58
58
  return count;
59
59
  }
60
60
  },
@@ -63,7 +63,7 @@
63
63
  this.isWordOver = this.detectError(this.wordCount, this.maxWord);
64
64
  this.isLineOver = this.detectError(this.lineCount, this.maxLine);
65
65
  },
66
- detectError: function(count, max) {
66
+ detectError: function(count, max) {　
67
67
  return count > max;
68
68
  }
69
69
  }